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

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

  • 1.
    UI/UX Best Practicesin CMS Based Web Design
  • 2.
    Housekeeping • Webinar recordingsand 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 ManagementSystem • 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 AContent 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 ManageImplement 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/UXin CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 8.
    Importance of UI/UXin CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 9.
    Importance of UI/UXin CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 10.
    Importance of UI/UXin CMS Design © Harbinger Systems | www.harbinger-systems.com
  • 11.
    Importance of UI/UXin CMS Design © Harbinger Systems | www.harbinger-systems.com Before After
  • 12.
    Importance of UI/UXin 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 Addpages, 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 indesign 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 shouldbe 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 – CMSDesign 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 – StartupISV © Harbinger Systems | www.harbinger-systems.com Getting business started Simple and powerful design Cost efficient
  • 34.
    Recommendations – EnterpriseISV © Harbinger Systems | www.harbinger-systems.com Achieve more business Achieve exceptional User Experience Cost is secondary
  • 35.
    Special Offer forWebinar 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 forWebinar 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 usat: 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

  • #29 Show image and content on the same slide
  • #32 Sazzy pets image
  • #37 36