This document provides an overview of website design and development. It discusses key topics such as website specifications, visual design principles, content planning, user experience, and legal considerations. It also compares physical offices to websites. Website design involves specifying goals, required pages, visual elements, and user experience. Development turns design concepts into a functioning website through programming languages, hosting, and content management systems. Effective planning is important for meeting objectives and managing expectations.

1. Chapter 2| Website Design
& Website Development
University of Cape Town
29 July 2011

2. What will I learn today?
o Websites, the centre of Online Strategy
o Website design specification sheets
o Website design planning
o Principles of Visual Design
o Content aspects of your website
o User interface & user experience
o Legal considerations of website design
o Web design applications
o 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

7. 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?

8. 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

9. 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

10. 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

11. Programming
languages
• HTML
• XHTML
• XML
• CSS
• Flash
• Java
• PHP
• C+
• .NET
• ASP

12. 4. Website Design Planning

13. 4.1 Design Planning
1. Purpose of your website: summarise goals & objectives
in two sentences
2. 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

14. 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

15. Design Considerations
Public face of your business. Research competitor & related industry
sites, target market expectations, fit in with overall Corporate Identity
(brand image = nb)

16. Pages on a website
" Home, About, Contact – essential
" Products, Blog, Customer error page
" Portfolio, Corporate mission / vision, careers etc.

17. Funny 404 Pages

18. Parts on a Web page
Considerations – 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.

19. Basic Web Design Principles
Consider screen resolution, keep it simple, prefer minimalism, limit your
colours and fonts, standardise your style

20. Video Sonic Labs = gr8 – NOT!

21. Lings Cars aka LINGs Confucious

22. Aunty Manon’s Language School

23. Audi – Vorsprung dur Technik

24. Expedia – Travel the World!

25. Simple Document Sharing FTW

26. Web style guides
Choose specific colours, fonts, images, layouts & other elements –
document defining design & style choices

27. Colour

28. Fonts

29. Layout

30. Wireframes

31. Webdesigner Depot

32. Web Design Resources

33. 4.3 Content Considerations
1. Hierarchy
2. Call to action
3. Writing for the web
4. Content management system

34. 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

35. High tier Site Architecture

36. Flattened Site Architecture = best

37. 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

38. Writing for the
Web
• 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)

39. Choose a Content
Management System

40. Content Management Systems
Basic Template CMS Open Source CMS Custom CMS
Simple, easy to use More advanced, easy to use For advanced users only
No technical knowledge Some technical knowledge Extensive technical
needed needed knowledge needed
Used by anyone Used by anyone, requires Requires experienced web
web developer involvement developer
Cheap Custom mid-level pricing Expensive

41. 4.4 User Interface & User
Experience (UI / UX)

42. User Interface
What your customers will see and interact with when they visit your website –
links, navigation, clickable buttons, forms, page layout. Should be tailored to
your target market

43. User
Experience
Involves every part of interaction
with 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

44. 4.5 Legal Considerations

45. Legal Considerations
1. 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 use
3. Privacy Policy: State how personal data (e.g. email address) will
be used and what you will not do
4. 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

46. 4.6 Website Applications
Huge variety of website builders available in the market –
choose very carefully!

47. Wordpress

48. Wordpress Themes

49. WooThemes

50. Joomla

51. Template Monster

52. Drupal Web Development

53. eCommerce Custom

54. Yola Website Builder

55. Wix (Flash) Website Builder

56. Tank Website Builder

57. DoodleKit Website Builder

58. Magento eCommerce Platform

59. Web Development
The process of turning the concepts created during web
design phase into a functioning website

60. 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. Also
depends on your budget and size of your company

61. Communicating
with a Web
Developer
Documents:
• Design specification sheet
• Technical brief
• Domain & hosting information
Web Developer Website Aims:
• Site easy to update (CMS)
• Quick to load (Site speed)
• Easy to find (SEO)
• Interactive
• Secure site (Spamming, virus
protection nb)

62. Hosting & Domain Name Options
Socialising, cooperation, sharing, personal entertainment, attention economy –
space for work & play, digital spend overtook traditional newspaper advertising
spend in 2010

63. 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 .co.za?
" Check if names chosen is available
" Don’t use more than one domain name

64. Whois

65. GoDaddy

66. Reasonable Expectations
Have realistic expectations in terms of cost and development
timelines

67. Website Development - Step
by Step

68. Step-by-step Website Development
1. Conceptualisation & planning
2. Consult web design & development experts
3. Choose developer & designer
4. Designer creates visual mock-ups
5. Mock-up variation & approval
6. Developer transforms mock-up into functional site
7. Pay for development, hosting & website made live

69. The Web Development Process

70. Thank You!

71. Useful links …
http://theoatmeal.com/comics/design_changes
http://theoatmeal.com/comics/websites_stop
http://en.wikipedia.org/wiki/
List_of_programming_languages
http://www.1stwebdesigner.com/design/
wireframing-mockup-prototyping-tools-plan-
designs/