Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web design and structure with new trends in web design and ways to make your website more engaging

1,888 views

Published on

Read on to get idea of a good web design and its contents. It has good self explanatory images.

Published in: Education, Technology, Business

Web design and structure with new trends in web design and ways to make your website more engaging

  1. 1. Website Design and Structure © Professor Seema Gupta Seema Gupta Professor at IIMB Blog: www.digitalmediatadka.com Facebook: https://www.facebook.com/digitalmarketingtadka Follow on twitter @seemaiimb
  2. 2. Contents Introduction Design Interaction OVP(Online Value Proposition) Customer Orientation Personalization ORM(Online Retail Merchandise) New Trends © Professor Seema Gupta
  3. 3. Introduction © Professor Seema Gupta
  4. 4. Website as Real Estate property © Professor Seema Gupta
  5. 5. Website goals 5S’S • Sell • Serve • Speak • Save • Sizzle © Professor Seema Gupta
  6. 6. Robert Cialdini’s weapons of influence Visual Design Web analytics Legal requirements Digital marketing, Planning and Improvement © Professor Seema Gupta
  7. 7. © Professor Seema Gupta Design
  8. 8. Importance of a good web design Converts traffic to business. Builds connections. Keeps the user connected. Provides a pleasant experience to the user. © Professor Seema Gupta
  9. 9. Page design It is common to have different page templates For the key pages like home page, service page, Blog page, etc. Users spend most of the time on old conventional websites, so they expect they might expect newer sites to be similar. © Professor Seema Gupta
  10. 10. Integrated design • Integration of web and data base, remembers the customer’s name, preferences and behaviors. • Personalizes the experience © Professor Seema Gupta
  11. 11. © Professor Seema Gupta
  12. 12. Key Steps: PDDTD Planning Design Development Testing Deployment © Professor Seema Gupta
  13. 13. To Be SAFE follow SEF Simple Elegant Functional Often a simple elegant and a functional design works out. © Professor Seema Gupta Usability And Accessibility
  14. 14. Ease of use Ease of use = S+N+I+P Structure Navigation Interaction Page layout © Professor Seema Gupta
  15. 15. Domain names Catchy and easy to remember. Buy multiple domain names like .com, .net, .in and redirect the user to the original site. © Professor Seema Gupta
  16. 16. Arranging Information © Professor Seema Gupta
  17. 17. Home page • It is a central reference point. • It could be used to highlight special offers, news etc. • Example: http://www.whitehouse.gov © Professor Seema Gupta
  18. 18. Writing effective web content Use the inverted pyramid style of writing Know your audience Make it scan able Make it original © Professor Seema Gupta
  19. 19. Freshness of content © Professor Seema Gupta You can see how mtv maintains freshness of site by uploading “Our Fave videos” Source: www.mtv.com
  20. 20. © Professor Seema Gupta Source: www.mp09digital.com
  21. 21. Aesthetics © Professor Seema Gupta
  22. 22. Aesthetics It’s the personality of the website © Professor Seema Gupta
  23. 23. Aesthetics=LTGCS Layout Typography Graphics Color Style © Professor Seema Gupta
  24. 24. 4 second rule Research from Akamai shows that content needs to download rapidly, otherwise site experience suffers and visitors will leave the site © Professor Seema Gupta
  25. 25. © Professor Seema Gupta Interaction
  26. 26. © Professor Seema Gupta Interaction Source: FedEx website
  27. 27. © Professor Seema Gupta Interaction through animation Source: www.nike.com
  28. 28. © Professor Seema Gupta Interaction through case studies Source: www.accenture.com
  29. 29. © Professor Seema Gupta Interactive product adviser Call back facility Chat facility Onsite search engine Email a friend facility Other types of interaction
  30. 30. Mistakes in web design • Using pdf files • Same color for every Link • Non scan able text • Anything that looks like an advertisement • Opening new windows © Professor Seema Gupta
  31. 31. Online Value Proposition(OVP) © Professor Seema Gupta
  32. 32. Online Value Proposition(OVP) © Professor Seema Gupta
  33. 33. © Professor Seema Gupta You could read on every page it says – genuine products, secure payments and easy returns Source: www.amazon.in
  34. 34. Customer Orientation © Professor Seema Gupta
  35. 35. Rosenfeld and Morville suggest 4 stages help achieve customer orientation • Identify Audiences • Rank importance of each to the business • List the 3 important information needs of each • Ask representatives of each audience to develop their own wish list © Professor Seema Gupta
  36. 36. Customer Orientation It is about trying to provide content that appeals to various users. 3% of the visitors are buyers are buyers and remaining are potential buyers and disqualified traffic Convert the others into buyers. © Professor Seema Gupta
  37. 37. You could see there is a worldwide change option..which gives different content for different users Source:www.cisco.com
  38. 38. © Professor Seema Gupta You could there is a different login for premier users Source: www.dell.co.in
  39. 39. Personalization © Professor Seema Gupta
  40. 40. Personalization © Professor Seema Gupta You could see that you can design your own t-shirt in the alma mater website which has served 3,30,000 customers Source: www.almamaterstore.in
  41. 41. Personalization © Professor Seema Gupta If you have seen videos of some person then youtube recommends you to subscribe to them
  42. 42. © Professor Seema Gupta The most important sound to any one is your own name. So, there is your name everywhere…as you login through facebook Source: www.amazon.in
  43. 43. Personalization can be based on • Customer • Country • Customer preferences • Results searches © Professor Seema Gupta
  44. 44. Online retail merchandise © Professor Seema Gupta
  45. 45. Online retail merchandise It aims at maximizing the sales potential for each store visitor. Presenting relevant products and promotions to site visitors which help in conversion rate and average order value Some common approaches are listed next© Professor Seema Gupta
  46. 46. 1)Faceted search © Professor Seema Gupta Source: www.Epicurious.com full-fledged faceted navigation on allows users to narrow results by several different dimensions
  47. 47. 2)Featuring best selling products prominently You could set the snip from flipkart taken in the midst of summer showcasing an ac with a free stabilizer. © Professor Seema Gupta Source: www.flipkart.com
  48. 48. 3)Use of bundling © Professor Seema Gupta Source: www.mcdonalds.com
  49. 49. 4)Use of customer ratings and reviews © Professor Seema Gupta Source: www.flipkart.com
  50. 50. 5)Use of product visualization systems © Professor Seema GuptaSource: www.myntra.com
  51. 51. © Professor Seema Gupta New Trends
  52. 52. Less text © Professor Seema Gupta
  53. 53. Video/movingbackgrounds(Click hyperlink to view video) © Professor Seema Gupta
  54. 54. Richer content experiences © Professor Seema Gupta Source: www.harley-davidson.com
  55. 55. Hypercolour © Professor Seema Gupta
  56. 56. Cards / tiles © Professor Seema Gupta
  57. 57. Monochromatic design © Professor Seema Gupta
  58. 58. © Professor Seema Gupta Third-Party Services
  59. 59. © Professor Seema GuptaSource: www.jabong.com
  60. 60. © Professor Seema Gupta Thank you Read more articles at www.digitalmediatadka.com

×