SlideShare a Scribd company logo
1 of 38
UI/UX Best Practices in
CMS Based Web Design
Housekeeping
• Webinar recordings and slides will be shared with all
attendees
• Type in your questions and comments using the
questions pane on the right hand side
• “Special Offer” exclusively for the webinar attendees
© Harbinger Systems | www.harbinger-systems.com
Presenters
© Harbinger Systems | www.harbinger-systems.com
Kirti Wagh
Associate Design Manager
Harbinger Systems
Eshan Sarpotdar
Digital Content Writer
Harbinger Systems
Agenda
• Content Management System
• Importance of UI/UX in CMS based design
• Standard Template method
• Custom Template method
• Best UI Practices – Standard Template & Custom Template
• Recommendations
• Special Offer
• Q & A
© Harbinger Systems | www.harbinger-systems.com
Content Management System
A Content Management System is a simple and quick way to
develop a website.
© Harbinger Systems | www.harbinger-systems.com
CMS Features
• Quick development and deployment
• Easy design capabilities
• End-to-end site management
• Easy for non-technical user to manage
• Increased SEO performance
• High-end engagement with online content
CMS Benefits
Create Manage Implement
Shared
Resources
Database
Driven
Branding
Security &
Approval
Systems
Mobile Ready
Search
Engine
Friendly
We can create new pages,
sections, menus, media etc.
Easy to edit, format content
and manage the site
Easy to implement ready
code and template
Consistent brand and
standard navigation
Change once, update entire
website
Access to modules, images,
audio, video files etc.
Different levels of access
for approving content
Templates are mobile
compatible
Optimizes your website for
SEO compatibility
© Harbinger Systems | www.harbinger-systems.com
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
Before After
Importance of UI/UX in CMS Design
© Harbinger Systems | www.harbinger-systems.com
• UI/UX is based on below parameters:
• Demography
• Features provided by CMS
• Domain/Business
• Scope of customization
• UI/UX approach differs for various CMS
• Two ways of design implementation:
Standard Template Custom Template
Standard Template - Overview
• Ready designs available
• Follows the basic UI/UX guidelines
• Templates available with HTML/CSS
• CMS compatible
• Easy to implement and manage
• Template based sites may look alike
© Harbinger Systems | www.harbinger-systems.com
Standard Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before After
Standard Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before After
Standard Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before
After
Standard Template - Process
© Harbinger Systems | www.harbinger-systems.com
Select
Template
Change
branding and
images
Add pages,
navigation&
content
Deploy the
changes on
server
Website
ready!!
Custom Template - Overview
© Harbinger Systems | www.harbinger-systems.com
• Liberty to create design
• Add UI/UX value based on scope of customization
• Knowledge of framework is required
• The design should be easy to integrate
• CSS plays a major role
• We can achieve unique design
• Consumes more efforts
Custom Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before After
Custom Template - Example
© Harbinger Systems | www.harbinger-systems.com
Custom Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before After
Custom Template - Example
© Harbinger Systems | www.harbinger-systems.com
Custom Template - Example
© Harbinger Systems | www.harbinger-systems.com
Before
After
Create Custom
Design
Select default
template
Customize
template
Template
Integration
Add pages,
navigation &
content
Deploy the
changes on
server
Website
ready!!
Custom Template - Process
As per framework
compatibility
Modify CSS &
template
© Harbinger Systems | www.harbinger-systems.com
Best Practices – Standard Template
© Harbinger Systems | www.harbinger-systems.com
Do not change
the layout or
structure of the
template
Best Practices – Standard Template
© Harbinger Systems | www.harbinger-systems.com
We can change
the branding of
the template to
match the client’s
branding
This change
should be mainly
in terms of colors
and images
Best Practices – Standard Template
© Harbinger Systems | www.harbinger-systems.com
Once the branding is changed, we can add or edit content,
images as per client requirement
This is the quickest way to build a site or portal using CMS
Best Practices – Custom Template
It is important that the designer is aware about the framework
functionality before starting the design.
© Harbinger Systems | www.harbinger-systems.com
Maintaining consistency in design is very important. Same
section on different pages should look same.
Best Practices – Custom Template
© Harbinger Systems | www.harbinger-systems.com
Best Practices – Custom Template
© Harbinger Systems | www.harbinger-systems.com
Customizing plug-in should be studied and developed such that it
is easy to integrate and manage later
Best Practices – Custom Template
© Harbinger Systems | www.harbinger-systems.com
Recommendations – CMS Design
Choose standard template approach when:
• Less time – quick development
• Minimum needs
• Cost efficient
Choose custom template approach when:
• Looking for unique design
• CMS facility
• No major cost and time limitations
Recommendations – Startup ISV
© Harbinger Systems | www.harbinger-systems.com
Getting business started
Simple and powerful design
Cost efficient
Recommendations – Enterprise ISV
© Harbinger Systems | www.harbinger-systems.com
Achieve more business
Achieve exceptional User Experience
Cost is secondary
Special Offer for Webinar Attendees
Get 1 Hour Free Consultation from our UI UX Experts
Discuss your UI & UX Challenges
Write to us at hsinfo@harbingergroup.com to avail your offer.
© Harbinger Systems | www.harbinger-systems.com
Special Offer for Webinar Attendees
Get 1 Hour Free Consultation from our UI UX Experts
Discuss your UI & UX Challenges
Write to us at hsinfo@harbingergroup.com to avail your offer.
Thank You!
Visit us at: www.harbinger-systems.com
Write to us at: hsinfo@harbingergroup.com
Blog: blog.harbinger-systems.com
Twitter: twitter.com/HarbingerSys (@HarbingerSys)
Slideshare: slideshare.net/hsplmkting
Facebook: facebook.com/harbingersys
LinkedIn: linkedin.com/company/382306
© Harbinger Systems | www.harbinger-systems.com

More Related Content

What's hot

[WSO2Con EU 2017] Darwin Ate My App
[WSO2Con EU 2017] Darwin Ate My App[WSO2Con EU 2017] Darwin Ate My App
[WSO2Con EU 2017] Darwin Ate My AppWSO2
 
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 Integration
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 IntegrationWSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 Integration
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 IntegrationWSO2
 
Webinar: Embracing REST APIs through APPSeCONNECT
Webinar: Embracing REST APIs through APPSeCONNECTWebinar: Embracing REST APIs through APPSeCONNECT
Webinar: Embracing REST APIs through APPSeCONNECTAPPSeCONNECT
 
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...WSO2
 
WSO2Con USA 2017: Positioning WSO2 for Quicker Uptake
WSO2Con USA 2017: Positioning WSO2 for Quicker UptakeWSO2Con USA 2017: Positioning WSO2 for Quicker Uptake
WSO2Con USA 2017: Positioning WSO2 for Quicker UptakeWSO2
 
WSO2Con USA 2017: Building Platforms for Rapid Application Development
WSO2Con USA 2017: Building Platforms for Rapid Application DevelopmentWSO2Con USA 2017: Building Platforms for Rapid Application Development
WSO2Con USA 2017: Building Platforms for Rapid Application DevelopmentWSO2
 
PortHand Overview August 2013
PortHand Overview August 2013PortHand Overview August 2013
PortHand Overview August 2013PortHand
 
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...AppDynamics
 
Sharepoint - An Introduction
Sharepoint - An IntroductionSharepoint - An Introduction
Sharepoint - An IntroductionANOOP A V
 
re:Invent 2018 - Scaling and Supporting Your Production App
re:Invent 2018 -  Scaling and Supporting Your Production Appre:Invent 2018 -  Scaling and Supporting Your Production App
re:Invent 2018 - Scaling and Supporting Your Production AppCloudHesive
 
WSO2Con USA 2017: Building an Effective API Architecture
WSO2Con USA 2017: Building an Effective API ArchitectureWSO2Con USA 2017: Building an Effective API Architecture
WSO2Con USA 2017: Building an Effective API ArchitectureWSO2
 
How The Container Store uses AppDynamics in their development lifecycle
How The Container Store uses AppDynamics in their development lifecycleHow The Container Store uses AppDynamics in their development lifecycle
How The Container Store uses AppDynamics in their development lifecycleAppDynamics
 
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...WSO2
 
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)Cprime
 
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...WSO2
 
Disruptive Trends in Application Development
Disruptive Trends in Application DevelopmentDisruptive Trends in Application Development
Disruptive Trends in Application DevelopmentWaveMaker, Inc.
 
Limitations and Cost of Using Microsoft's Power Platform
Limitations and Cost of Using Microsoft's Power PlatformLimitations and Cost of Using Microsoft's Power Platform
Limitations and Cost of Using Microsoft's Power PlatformScott Restivo
 
Command central 9.7: Features Overview
Command central 9.7: Features OverviewCommand central 9.7: Features Overview
Command central 9.7: Features OverviewSoftware AG
 
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor Flow
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor FlowPower Automate/ Flow patterns tips and tricks after 3 years with Doctor Flow
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor Flowserge luca
 

What's hot (20)

[WSO2Con EU 2017] Darwin Ate My App
[WSO2Con EU 2017] Darwin Ate My App[WSO2Con EU 2017] Darwin Ate My App
[WSO2Con EU 2017] Darwin Ate My App
 
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 Integration
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 IntegrationWSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 Integration
WSO2Con USA 2017: Implement an Effective Digital Platform Using WSO2 Integration
 
Webinar: Embracing REST APIs through APPSeCONNECT
Webinar: Embracing REST APIs through APPSeCONNECTWebinar: Embracing REST APIs through APPSeCONNECT
Webinar: Embracing REST APIs through APPSeCONNECT
 
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
[WSO2Con EU 2017] Continuous Integration, Delivery and Deployment: Accelerate...
 
WSO2Con USA 2017: Positioning WSO2 for Quicker Uptake
WSO2Con USA 2017: Positioning WSO2 for Quicker UptakeWSO2Con USA 2017: Positioning WSO2 for Quicker Uptake
WSO2Con USA 2017: Positioning WSO2 for Quicker Uptake
 
WSO2Con USA 2017: Building Platforms for Rapid Application Development
WSO2Con USA 2017: Building Platforms for Rapid Application DevelopmentWSO2Con USA 2017: Building Platforms for Rapid Application Development
WSO2Con USA 2017: Building Platforms for Rapid Application Development
 
PortHand Overview August 2013
PortHand Overview August 2013PortHand Overview August 2013
PortHand Overview August 2013
 
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...
AppSphere 15 - How The Container Store Uses AppDynamics in their Development ...
 
Sharepoint - An Introduction
Sharepoint - An IntroductionSharepoint - An Introduction
Sharepoint - An Introduction
 
re:Invent 2018 - Scaling and Supporting Your Production App
re:Invent 2018 -  Scaling and Supporting Your Production Appre:Invent 2018 -  Scaling and Supporting Your Production App
re:Invent 2018 - Scaling and Supporting Your Production App
 
WSO2Con USA 2017: Building an Effective API Architecture
WSO2Con USA 2017: Building an Effective API ArchitectureWSO2Con USA 2017: Building an Effective API Architecture
WSO2Con USA 2017: Building an Effective API Architecture
 
How The Container Store uses AppDynamics in their development lifecycle
How The Container Store uses AppDynamics in their development lifecycleHow The Container Store uses AppDynamics in their development lifecycle
How The Container Store uses AppDynamics in their development lifecycle
 
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...
WSO2Con USA 2017: Providing a Pathway from Stovepipe Systems to a Secure SOA ...
 
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)
Atlassian Health Reports: The Rx Solution for your Atlassian Instance (Part 3)
 
HTML5@Neev
HTML5@NeevHTML5@Neev
HTML5@Neev
 
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...
WSO2Con EU 2016: Building Your Deployment Architecture Through Requirements, ...
 
Disruptive Trends in Application Development
Disruptive Trends in Application DevelopmentDisruptive Trends in Application Development
Disruptive Trends in Application Development
 
Limitations and Cost of Using Microsoft's Power Platform
Limitations and Cost of Using Microsoft's Power PlatformLimitations and Cost of Using Microsoft's Power Platform
Limitations and Cost of Using Microsoft's Power Platform
 
Command central 9.7: Features Overview
Command central 9.7: Features OverviewCommand central 9.7: Features Overview
Command central 9.7: Features Overview
 
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor Flow
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor FlowPower Automate/ Flow patterns tips and tricks after 3 years with Doctor Flow
Power Automate/ Flow patterns tips and tricks after 3 years with Doctor Flow
 

Viewers also liked

UX Design for Content Management Systems
UX Design for Content Management SystemsUX Design for Content Management Systems
UX Design for Content Management SystemsDani Nordin
 

Viewers also liked (15)

UX Design for Content Management Systems
UX Design for Content Management SystemsUX Design for Content Management Systems
UX Design for Content Management Systems
 
Create scalable and configurable multi tenancy application
Create scalable and configurable multi tenancy applicationCreate scalable and configurable multi tenancy application
Create scalable and configurable multi tenancy application
 
Discover the Potential of your Data with Machine Learning
Discover the Potential of your Data with Machine LearningDiscover the Potential of your Data with Machine Learning
Discover the Potential of your Data with Machine Learning
 
Building next gen hr solutions with people analytics-final
Building next gen hr solutions with people analytics-finalBuilding next gen hr solutions with people analytics-final
Building next gen hr solutions with people analytics-final
 
iOS 8 HealthKit: Driving Smart Health Solutions
iOS 8 HealthKit: Driving Smart Health SolutionsiOS 8 HealthKit: Driving Smart Health Solutions
iOS 8 HealthKit: Driving Smart Health Solutions
 
Webinar: Structured attestation to meaningful use stage 2
Webinar: Structured attestation to meaningful use stage 2Webinar: Structured attestation to meaningful use stage 2
Webinar: Structured attestation to meaningful use stage 2
 
Open Technology Solutions For Healthcare Startups
Open Technology Solutions For Healthcare StartupsOpen Technology Solutions For Healthcare Startups
Open Technology Solutions For Healthcare Startups
 
Building real-time-collaborative-web-applications
Building real-time-collaborative-web-applicationsBuilding real-time-collaborative-web-applications
Building real-time-collaborative-web-applications
 
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JSJavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
 
CLOUDIFICATION FOR INTERNET OF THINGS - THE ROAD AHEAD
CLOUDIFICATION FOR INTERNET OF THINGS - THE ROAD AHEADCLOUDIFICATION FOR INTERNET OF THINGS - THE ROAD AHEAD
CLOUDIFICATION FOR INTERNET OF THINGS - THE ROAD AHEAD
 
Webinar- Internet of Things: Application Frameworks in IoT
Webinar- Internet of Things: Application Frameworks in IoTWebinar- Internet of Things: Application Frameworks in IoT
Webinar- Internet of Things: Application Frameworks in IoT
 
Webinar: Digital Health - The New Rx for USA Healthcare Ecosystem
Webinar: Digital Health - The New Rx for USA Healthcare EcosystemWebinar: Digital Health - The New Rx for USA Healthcare Ecosystem
Webinar: Digital Health - The New Rx for USA Healthcare Ecosystem
 
Webinar IoT Cloud Platforms and Middleware for Rapid Application Development
Webinar IoT Cloud Platforms and Middleware for Rapid Application DevelopmentWebinar IoT Cloud Platforms and Middleware for Rapid Application Development
Webinar IoT Cloud Platforms and Middleware for Rapid Application Development
 
Engage for Success: Improve Workforce Engagement with Open Communication and ...
Engage for Success: Improve Workforce Engagement with Open Communication and ...Engage for Success: Improve Workforce Engagement with Open Communication and ...
Engage for Success: Improve Workforce Engagement with Open Communication and ...
 
Webinar: IoT in Healthcare - An Overview
Webinar: IoT in Healthcare - An OverviewWebinar: IoT in Healthcare - An Overview
Webinar: IoT in Healthcare - An Overview
 

Similar to Webinar: UI/UX best practices in cms based web design

Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
CMS Presentation
CMS PresentationCMS Presentation
CMS Presentationkinserju
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentDave Wallace
 
Implementing and managing Content Management Systems
Implementing and managing Content Management SystemsImplementing and managing Content Management Systems
Implementing and managing Content Management SystemsR Sundara Rajan
 
Why should we use content management system
Why should we use content management systemWhy should we use content management system
Why should we use content management systemsiavosh kaviani
 
What are IBM Rational's CLM products
What are IBM Rational's CLM productsWhat are IBM Rational's CLM products
What are IBM Rational's CLM productsShawn Doyle
 
Web development services
Web development servicesWeb development services
Web development serviceswebinfomatrix3
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEOPrakrati Bansal
 
Content management system a full guide
Content management system a full guideContent management system a full guide
Content management system a full guideFullestop
 
SNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptSNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptChakrapaniGunti
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management SystemsDani Nordin
 
Convert Your Website to a CMS
Convert Your Website to a CMSConvert Your Website to a CMS
Convert Your Website to a CMSHireWPGeeks Ltd
 
School Website Development Presentation
School Website Development  PresentationSchool Website Development  Presentation
School Website Development PresentationKen Ouma
 
Designing Web Experiences - Eyecatch
Designing Web Experiences - EyecatchDesigning Web Experiences - Eyecatch
Designing Web Experiences - EyecatchVishnu Vallabh
 
28 SEO-Optimized WordPress Alternatives Worth Trying
28 SEO-Optimized WordPress Alternatives Worth Trying28 SEO-Optimized WordPress Alternatives Worth Trying
28 SEO-Optimized WordPress Alternatives Worth TryingSOFTTECHHUB
 
Website builders workshop
Website builders workshopWebsite builders workshop
Website builders workshopAshley Turner
 

Similar to Webinar: UI/UX best practices in cms based web design (20)

Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
CMS Presentation
CMS PresentationCMS Presentation
CMS Presentation
 
The Future of the CMS
The Future of the CMSThe Future of the CMS
The Future of the CMS
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
 
Implementing and managing Content Management Systems
Implementing and managing Content Management SystemsImplementing and managing Content Management Systems
Implementing and managing Content Management Systems
 
Fastlix
FastlixFastlix
Fastlix
 
Why should we use content management system
Why should we use content management systemWhy should we use content management system
Why should we use content management system
 
Monsters of cms
Monsters of cmsMonsters of cms
Monsters of cms
 
What are IBM Rational's CLM products
What are IBM Rational's CLM productsWhat are IBM Rational's CLM products
What are IBM Rational's CLM products
 
Web development services
Web development servicesWeb development services
Web development services
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEO
 
Content management system a full guide
Content management system a full guideContent management system a full guide
Content management system a full guide
 
WordPress for Designers
WordPress for DesignersWordPress for Designers
WordPress for Designers
 
SNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.pptSNOW Knowledge Management_SSP.ppt
SNOW Knowledge Management_SSP.ppt
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management Systems
 
Convert Your Website to a CMS
Convert Your Website to a CMSConvert Your Website to a CMS
Convert Your Website to a CMS
 
School Website Development Presentation
School Website Development  PresentationSchool Website Development  Presentation
School Website Development Presentation
 
Designing Web Experiences - Eyecatch
Designing Web Experiences - EyecatchDesigning Web Experiences - Eyecatch
Designing Web Experiences - Eyecatch
 
28 SEO-Optimized WordPress Alternatives Worth Trying
28 SEO-Optimized WordPress Alternatives Worth Trying28 SEO-Optimized WordPress Alternatives Worth Trying
28 SEO-Optimized WordPress Alternatives Worth Trying
 
Website builders workshop
Website builders workshopWebsite builders workshop
Website builders workshop
 

More from Harbinger Systems - HRTech Builder of Choice

More from Harbinger Systems - HRTech Builder of Choice (20)

Using People Analytics for a Sustainable Remote Workforce
Using People Analytics for a Sustainable Remote WorkforceUsing People Analytics for a Sustainable Remote Workforce
Using People Analytics for a Sustainable Remote Workforce
 
5 Trends That Will Drive the Transformation of EdTech in 2021
5 Trends That Will Drive the Transformation of EdTech in 20215 Trends That Will Drive the Transformation of EdTech in 2021
5 Trends That Will Drive the Transformation of EdTech in 2021
 
Rapidly Transforming Organizational Content into Learning Experiences
Rapidly Transforming Organizational Content into Learning ExperiencesRapidly Transforming Organizational Content into Learning Experiences
Rapidly Transforming Organizational Content into Learning Experiences
 
Scalable HR Integrations for Better Data Analytics: Challenges & Solutions
Scalable HR Integrations for Better Data Analytics: Challenges & SolutionsScalable HR Integrations for Better Data Analytics: Challenges & Solutions
Scalable HR Integrations for Better Data Analytics: Challenges & Solutions
 
5 Key Items HR Should Consider Before Buying HR Technologies
5 Key Items HR Should Consider Before Buying HR Technologies5 Key Items HR Should Consider Before Buying HR Technologies
5 Key Items HR Should Consider Before Buying HR Technologies
 
Best Practices to Build Marketplace-Ready Integrations
Best Practices to Build Marketplace-Ready IntegrationsBest Practices to Build Marketplace-Ready Integrations
Best Practices to Build Marketplace-Ready Integrations
 
HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...
HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...
HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...
 
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Recalibrating Product Strategy - Addressing Demand Shifts in Existing MarketsRecalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
 
How to Gain Key Insights from Data Distributed Across Multiple HR Systems
How to Gain Key Insights from Data Distributed Across Multiple HR SystemsHow to Gain Key Insights from Data Distributed Across Multiple HR Systems
How to Gain Key Insights from Data Distributed Across Multiple HR Systems
 
HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...
HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...
HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...
 
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Recalibrating Product Strategy - Addressing Demand Shifts in Existing MarketsRecalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
 
Integrating System of Records and Collaboration Tools
Integrating System of Records and Collaboration ToolsIntegrating System of Records and Collaboration Tools
Integrating System of Records and Collaboration Tools
 
How to Power Your HR Apps With AI And Make It Explainable
How to Power Your HR Apps With AI And Make It ExplainableHow to Power Your HR Apps With AI And Make It Explainable
How to Power Your HR Apps With AI And Make It Explainable
 
Chatbot for Continuous Performance Management
Chatbot for Continuous Performance Management Chatbot for Continuous Performance Management
Chatbot for Continuous Performance Management
 
Leveraging mobile capabilities in your HR application
Leveraging mobile capabilities in your HR applicationLeveraging mobile capabilities in your HR application
Leveraging mobile capabilities in your HR application
 
Automate HR applications using AI and ML
Automate HR applications using AI and MLAutomate HR applications using AI and ML
Automate HR applications using AI and ML
 
A Cloud-based Collaborative Learning and Coaching Platform
A Cloud-based Collaborative Learning and Coaching PlatformA Cloud-based Collaborative Learning and Coaching Platform
A Cloud-based Collaborative Learning and Coaching Platform
 
Extending LRSs and the xAPI for Event-driven Blended and Adaptive Learning
Extending LRSs and the xAPI for Event-driven Blended and Adaptive LearningExtending LRSs and the xAPI for Event-driven Blended and Adaptive Learning
Extending LRSs and the xAPI for Event-driven Blended and Adaptive Learning
 
Impact of SMAC Technology in HCM
Impact of SMAC Technology in HCMImpact of SMAC Technology in HCM
Impact of SMAC Technology in HCM
 
A medical prescription reminder app for i phone
A medical prescription reminder app for i phoneA medical prescription reminder app for i phone
A medical prescription reminder app for i phone
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformWSO2
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaWSO2
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governanceWSO2
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....rightmanforbloodline
 

Recently uploaded (20)

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 

Webinar: UI/UX best practices in cms based web design

  • 1. UI/UX Best Practices in CMS Based Web Design
  • 2. Housekeeping • Webinar recordings and slides will be shared with all attendees • Type in your questions and comments using the questions pane on the right hand side • “Special Offer” exclusively for the webinar attendees © Harbinger Systems | www.harbinger-systems.com
  • 3. Presenters © Harbinger Systems | www.harbinger-systems.com Kirti Wagh Associate Design Manager Harbinger Systems Eshan Sarpotdar Digital Content Writer Harbinger Systems
  • 4. Agenda • Content Management System • Importance of UI/UX in CMS based design • Standard Template method • Custom Template method • Best UI Practices – Standard Template & Custom Template • Recommendations • Special Offer • Q & A © Harbinger Systems | www.harbinger-systems.com
  • 5. Content Management System A Content Management System is a simple and quick way to develop a website. © Harbinger Systems | www.harbinger-systems.com CMS Features • Quick development and deployment • Easy design capabilities • End-to-end site management • Easy for non-technical user to manage • Increased SEO performance • High-end engagement with online content
  • 6. CMS Benefits Create Manage Implement Shared Resources Database Driven Branding Security & Approval Systems Mobile Ready Search Engine Friendly We can create new pages, sections, menus, media etc. Easy to edit, format content and manage the site Easy to implement ready code and template Consistent brand and standard navigation Change once, update entire website Access to modules, images, audio, video files etc. Different levels of access for approving content Templates are mobile compatible Optimizes your website for SEO compatibility © Harbinger Systems | www.harbinger-systems.com
  • 7. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 8. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 9. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 10. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 11. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com Before After
  • 12. Importance of UI/UX in CMS Design © Harbinger Systems | www.harbinger-systems.com • UI/UX is based on below parameters: • Demography • Features provided by CMS • Domain/Business • Scope of customization • UI/UX approach differs for various CMS • Two ways of design implementation: Standard Template Custom Template
  • 13. Standard Template - Overview • Ready designs available • Follows the basic UI/UX guidelines • Templates available with HTML/CSS • CMS compatible • Easy to implement and manage • Template based sites may look alike © Harbinger Systems | www.harbinger-systems.com
  • 14. Standard Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 15. Standard Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 16. Standard Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 17. Standard Template - Process © Harbinger Systems | www.harbinger-systems.com Select Template Change branding and images Add pages, navigation& content Deploy the changes on server Website ready!!
  • 18. Custom Template - Overview © Harbinger Systems | www.harbinger-systems.com • Liberty to create design • Add UI/UX value based on scope of customization • Knowledge of framework is required • The design should be easy to integrate • CSS plays a major role • We can achieve unique design • Consumes more efforts
  • 19. Custom Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 20. Custom Template - Example © Harbinger Systems | www.harbinger-systems.com
  • 21. Custom Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 22. Custom Template - Example © Harbinger Systems | www.harbinger-systems.com
  • 23. Custom Template - Example © Harbinger Systems | www.harbinger-systems.com Before After
  • 24. Create Custom Design Select default template Customize template Template Integration Add pages, navigation & content Deploy the changes on server Website ready!! Custom Template - Process As per framework compatibility Modify CSS & template © Harbinger Systems | www.harbinger-systems.com
  • 25. Best Practices – Standard Template © Harbinger Systems | www.harbinger-systems.com Do not change the layout or structure of the template
  • 26. Best Practices – Standard Template © Harbinger Systems | www.harbinger-systems.com We can change the branding of the template to match the client’s branding This change should be mainly in terms of colors and images
  • 27. Best Practices – Standard Template © Harbinger Systems | www.harbinger-systems.com Once the branding is changed, we can add or edit content, images as per client requirement This is the quickest way to build a site or portal using CMS
  • 28. Best Practices – Custom Template It is important that the designer is aware about the framework functionality before starting the design. © Harbinger Systems | www.harbinger-systems.com
  • 29. Maintaining consistency in design is very important. Same section on different pages should look same. Best Practices – Custom Template © Harbinger Systems | www.harbinger-systems.com
  • 30. Best Practices – Custom Template © Harbinger Systems | www.harbinger-systems.com
  • 31. Customizing plug-in should be studied and developed such that it is easy to integrate and manage later Best Practices – Custom Template © Harbinger Systems | www.harbinger-systems.com
  • 32. Recommendations – CMS Design Choose standard template approach when: • Less time – quick development • Minimum needs • Cost efficient Choose custom template approach when: • Looking for unique design • CMS facility • No major cost and time limitations
  • 33. Recommendations – Startup ISV © Harbinger Systems | www.harbinger-systems.com Getting business started Simple and powerful design Cost efficient
  • 34. Recommendations – Enterprise ISV © Harbinger Systems | www.harbinger-systems.com Achieve more business Achieve exceptional User Experience Cost is secondary
  • 35. Special Offer for Webinar Attendees Get 1 Hour Free Consultation from our UI UX Experts Discuss your UI & UX Challenges Write to us at hsinfo@harbingergroup.com to avail your offer.
  • 36. © Harbinger Systems | www.harbinger-systems.com
  • 37. Special Offer for Webinar Attendees Get 1 Hour Free Consultation from our UI UX Experts Discuss your UI & UX Challenges Write to us at hsinfo@harbingergroup.com to avail your offer.
  • 38. Thank You! Visit us at: www.harbinger-systems.com Write to us at: hsinfo@harbingergroup.com Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306 © Harbinger Systems | www.harbinger-systems.com

Editor's Notes

  1. Show image and content on the same slide
  2. Sazzy pets image
  3. 36