Your SlideShare is downloading. ×
Chapter 2  | Website design & development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chapter 2 | Website design & development


Published on

UCT eMarketing Chapter 2 Lecture Notes

UCT eMarketing Chapter 2 Lecture Notes

Published in: Business, Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Chapter 2| Website Design& Website DevelopmentUniversity of Cape Town29 July 2011
  • 2. What will I learn today?o  Websites, the centre of Online Strategyo  Website design specification sheetso  Website design planningo  Principles of Visual Designo  Content aspects of your websiteo  User interface & user experienceo  Legal considerations of website designo  Web design applicationso  Web Development
  • 3. 1. Website Design & Web Development Your website - the most important tool for creating a marketable web presence
  • 4. 2. Your Website is at the centre of your strategy"   It’s in your control: Express your marketing message to your heart’s content"   A powerful tool: Endless features & customer insight"   A hub: All marketing strategies lead to website"   You’re expected to have one: your audience will look for you"   Your brand’s online home: Devoted marketing, reference point for customers, POS, community, message board, etc."   It’s stable: site remains in same place while other marketing strategies change
  • 5. Comparison – Office vs. Website Physical Office Website§  Customer needs to know where to go §  Customer needs to know what in building parts of website is important to visit (UX)§  Environment clean & welcoming, §  Website designed by good professional and neat principles so it looks professional & easy to access (UI)§  Questions answered by in-house §  Customers can access website’s representative contact page or information pages§  Customer browses your product in §  Customer browses online your office catalogue§  Customer takes business card and §  Customer bookmarks page and leaflet signs up for email newsletter§  Customer makes a purchase §  Customer uses online store or online form to make a purchase
  • 6. Your target market"   Who?: Male / female, demographics, age"   Are they online?: UI & UX, info depends on this"   Their expectations?: Informational, navigational, interactivity, online purchases?"   Online savvy?: Advanced users or novices?" Accessability: How will they get to your website … by computer, laptop, mobile or tablet?
  • 7. 3. Website Design – Specification Sheets •  (Technical standard) that details exactly how website will be designed and built. Two main types are Design & Technical. •  Vary in detail, complexity & technical content •  Contract between you and service provider
  • 8. 3.1 Design Specification Sheet "   Goals of website: objectives you want to achieve "   Design deliverables: CI, logo, just web? "   List of required pages "   Individual page layouts "   Structure of website as whole "   Site content & SEO strategy "   Visual design element specifications: colours, logo, patterns, background, images, animations etc. "   Fonts, text styles and headings "   Functionality of pages (what will each page do) "   Intended user experience (visitor’s journey through site) "   Deadlines, time requirements and budget
  • 9. 3.2 Technical Specification Sheet "   Programming language used / required "   Website hosting "   Domain registration "   Content management system: type & requirements "   Security requirements "   Website functionality: e.g. coding of online forms
  • 10. Programminglanguages•  HTML•  XHTML•  XML•  CSS•  Flash•  Java•  PHP•  C+•  .NET•  ASP
  • 11. 4. Website Design Planning
  • 12. 4.1 Design Planning1.  Purpose of your website: summarise goals & objectives in two sentences2.  What do you NEED on your website?: Tools & functions essential to website (e.g. home, about, contact pages, navigation bar, corporate branding)3.  What do you WANT on your website?: Contact form, one-click sharing of content (e.g. Facebook, twitter), automated feedback forms, high-end graphics, etc.4.  How much control do you want over managing the website?: DIY? Level of involvement of developer / IT department. Consider content change requirements, type of site
  • 13. 4.2 Websites : Visually Speaking Design considerations; Pages on a website; Parts of a web page; Basic web design principles; Web design examples; Web style guides
  • 14. Design ConsiderationsPublic face of your business. Research competitor & related industrysites, target market expectations, fit in with overall Corporate Identity(brand image = nb)
  • 15. Pages on a website"   Home, About, Contact – essential"   Products, Blog, Customer error page"   Portfolio, Corporate mission / vision, careers etc.
  • 16. Funny 404 Pages
  • 17. Parts on a Web pageConsiderations – 1. Elements can be static or dynamic; 2. Every web page has a“fold”.Main components of web page is Header, navigation bar, Main body, footer,sidebar.
  • 18. Basic Web Design PrinciplesConsider screen resolution, keep it simple, prefer minimalism, limit yourcolours and fonts, standardise your style
  • 19. Video Sonic Labs = gr8 – NOT!
  • 20. Lings Cars aka LINGs Confucious
  • 21. Aunty Manon’s Language School
  • 22. Audi – Vorsprung dur Technik
  • 23. Expedia – Travel the World!
  • 24. Simple Document Sharing FTW
  • 25. Web style guidesChoose specific colours, fonts, images, layouts & other elements –document defining design & style choices
  • 26. Colour
  • 27. Fonts
  • 28. Layout
  • 29. Wireframes
  • 30. Webdesigner Depot
  • 31. Web Design Resources
  • 32. 4.3 Content Considerations 1.  Hierarchy 2.  Call to action 3.  Writing for the web 4.  Content management system
  • 33. Website Hierarchy•  Organise content in strict hierarchy depending on where it appears on page, linked to navigation•  Helps you structure your customer journey•  Shows how related content is grouped together•  Ordered by content relevance & group related elements together
  • 34. High tier Site Architecture
  • 35. Flattened Site Architecture = best
  • 36. Call to Action•  Ties in to your ultimate site goals and desired visitor actions – sign-up, sales, followers, etc.•  Should be unambiguous – what is important, desirable, relevant on your pages?•  Create KPIs
  • 37. Writing for theWeb•  Specific & unique•  Differs from traditional copywriting•  KISS principles = nb > short sentences, common words, paragraphs, bullet points, bolding•  (module 3 refers to this in more depth)
  • 38. Choose a ContentManagement System
  • 39. Content Management SystemsBasic Template CMS Open Source CMS Custom CMSSimple, easy to use More advanced, easy to use For advanced users onlyNo technical knowledge Some technical knowledge Extensive technicalneeded needed knowledge neededUsed by anyone Used by anyone, requires Requires experienced web web developer involvement developerCheap Custom mid-level pricing Expensive
  • 40. 4.4 User Interface & User Experience (UI / UX)
  • 41. User InterfaceWhat your customers will see and interact with when they visit your website –links, navigation, clickable buttons, forms, page layout. Should be tailored toyour target market
  • 42. UserExperienceInvolves every part of interactionwith website and includes:•  Mood site evokes•  Is it visually pleasing & appropriate?•  How responsive & easy to use•  Journey through pages•  Page elements appropriate & targeted to user•  Product Value perceived by user•  How well user can engage with content
  • 43. 4.5 Legal Considerations
  • 44. Legal Considerations1.  Respect copyright: Exclusive right of creator to use & exploit creative work – nobody may use, adapt or sell their work without creator’s permission. Adhere to “Fair Use”2.  Terms of use & disclaimers: Protects from litigation, anyone who uses website implicitly agrees to terms of use3.  Privacy Policy: State how personal data (e.g. email address) will be used and what you will not do4.  Communication online: Know how to balance right of freedom of expression with obligation to respect privacy and dignity, have brief plain-language version of acceptable terms of use
  • 45. 4.6 Website Applications Huge variety of website builders available in the market – choose very carefully!
  • 46. Wordpress
  • 47. Wordpress Themes
  • 48. WooThemes
  • 49. Joomla
  • 50. Template Monster
  • 51. Drupal Web Development
  • 52. eCommerce Custom
  • 53. Yola Website Builder
  • 54. Wix (Flash) Website Builder
  • 55. Tank Website Builder
  • 56. DoodleKit Website Builder
  • 57. Magento eCommerce Platform
  • 58. Web DevelopmentThe process of turning the concepts created during webdesign phase into a functioning website
  • 59. Outsourcing or Hiring?Web development can be a daunting task and it’s mostly best to get an expert –the decision depends on complexity of website and resources required. Alsodepends on your budget and size of your company
  • 60. Communicatingwith a WebDeveloperDocuments:•  Design specification sheet•  Technical brief•  Domain & hosting informationWeb Developer Website Aims:•  Site easy to update (CMS)•  Quick to load (Site speed)•  Easy to find (SEO)•  Interactive•  Secure site (Spamming, virus protection nb)
  • 61. Hosting & Domain Name OptionsSocialising, cooperation, sharing, personal entertainment, attention economy –space for work & play, digital spend overtook traditional newspaper advertisingspend in 2010
  • 62. Domain Registration"   Will customers look for your company name?"   Keep the name short and easy to remember & type"   Use keywords"   Choose international or local domain - .com or"   Check if names chosen is available"   Don’t use more than one domain name
  • 63. Whois
  • 64. GoDaddy
  • 65. Reasonable ExpectationsHave realistic expectations in terms of cost and developmenttimelines
  • 66. Website Development - Stepby Step
  • 67. Step-by-step Website Development1.  Conceptualisation & planning2.  Consult web design & development experts3.  Choose developer & designer4.  Designer creates visual mock-ups5.  Mock-up variation & approval6.  Developer transforms mock-up into functional site7.  Pay for development, hosting & website made live
  • 68. The Web Development Process
  • 69. Thank You!
  • 70. Useful links …