![Page 1: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/1.jpg)
Chapter 2| Website Design & Website Development
University of Cape Town 29 July 2011
![Page 2: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/2.jpg)
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
![Page 3: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/3.jpg)
1. Website Design & Web Development Your website - the most important tool for creating a marketable web presence
![Page 4: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/4.jpg)
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
![Page 5: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/5.jpg)
Comparison – Office vs. Website
§ Customer needs to know where to go in building
§ Environment clean & welcoming, professional and neat
§ Questions answered by in-house representative
§ Customer browses your product in your office
§ Customer takes business card and leaflet
§ Customer makes a purchase
§ Customer needs to know what parts of website is important to visit (UX)
§ Website designed by good principles so it looks professional & easy to access (UI)
§ Customers can access website’s contact page or information pages
§ Customer browses online catalogue
§ Customer bookmarks page and signs up for email newsletter
§ Customer uses online store or online form to make a purchase
Physical Office Website
![Page 6: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/6.jpg)
![Page 7: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/7.jpg)
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?
![Page 8: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/9.jpg)
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
![Page 10: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/11.jpg)
Programming languages
• HTML
• XHTML
• XML
• CSS
• Flash
• Java
• PHP
• C+
• .NET
• ASP
![Page 12: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/12.jpg)
4. Website Design Planning
![Page 13: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/13.jpg)
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
![Page 14: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/14.jpg)
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
![Page 15: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/15.jpg)
Design Considerations
Public face of your business. Research competitor & related industry sites, target market expectations, fit in with overall Corporate Identity (brand image = nb)
![Page 16: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/16.jpg)
Pages on a website
" Home, About, Contact – essential
" Products, Blog, Customer error page
" Portfolio, Corporate mission / vision, careers etc.
![Page 17: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/17.jpg)
Funny 404 Pages
![Page 18: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/18.jpg)
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.
![Page 19: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/19.jpg)
Basic Web Design Principles
Consider screen resolution, keep it simple, prefer minimalism, limit your colours and fonts, standardise your style
![Page 20: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/20.jpg)
Video Sonic Labs = gr8 – NOT!
![Page 21: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/21.jpg)
Lings Cars aka LINGs Confucious
![Page 22: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/22.jpg)
Aunty Manon’s Language School
![Page 23: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/23.jpg)
Audi – Vorsprung dur Technik
![Page 24: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/24.jpg)
Expedia – Travel the World!
![Page 25: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/25.jpg)
Simple Document Sharing FTW
![Page 26: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/26.jpg)
Web style guides Choose specific colours, fonts, images, layouts & other elements – document defining design & style choices
![Page 27: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/27.jpg)
Colour
![Page 28: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/28.jpg)
Fonts
![Page 29: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/29.jpg)
Layout
![Page 30: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/30.jpg)
Wireframes
![Page 31: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/31.jpg)
Webdesigner Depot
![Page 32: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/32.jpg)
Web Design Resources
![Page 33: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/33.jpg)
4.3 Content Considerations 1. Hierarchy
2. Call to action
3. Writing for the web
4. Content management system
![Page 34: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/34.jpg)
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
![Page 35: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/35.jpg)
High tier Site Architecture
![Page 36: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/36.jpg)
Flattened Site Architecture = best
![Page 37: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/37.jpg)
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
![Page 38: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/38.jpg)
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)
![Page 39: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/39.jpg)
Choose a Content Management System
![Page 40: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/40.jpg)
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 needed
Some technical knowledge needed
Extensive technical knowledge needed
Used by anyone Used by anyone, requires web developer involvement
Requires experienced web developer
Cheap Custom mid-level pricing Expensive
![Page 41: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/41.jpg)
4.4 User Interface & User Experience (UI / UX)
![Page 42: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/42.jpg)
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
![Page 43: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/43.jpg)
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
![Page 44: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/44.jpg)
4.5 Legal Considerations
![Page 45: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/45.jpg)
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
![Page 46: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/46.jpg)
4.6 Website Applications Huge variety of website builders available in the market – choose very carefully!
![Page 47: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/47.jpg)
Wordpress
![Page 48: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/48.jpg)
Wordpress Themes
![Page 49: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/49.jpg)
WooThemes
![Page 50: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/50.jpg)
Joomla
![Page 51: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/51.jpg)
Template Monster
![Page 52: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/52.jpg)
Drupal Web Development
![Page 53: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/53.jpg)
eCommerce Custom
![Page 54: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/54.jpg)
Yola Website Builder
![Page 55: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/55.jpg)
Wix (Flash) Website Builder
![Page 56: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/56.jpg)
Tank Website Builder
![Page 57: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/57.jpg)
DoodleKit Website Builder
![Page 58: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/58.jpg)
Magento eCommerce Platform
![Page 59: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/59.jpg)
Web Development The process of turning the concepts created during web design phase into a functioning website
![Page 60: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/60.jpg)
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
![Page 61: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/61.jpg)
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)
![Page 62: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/62.jpg)
Hosting & Domain Name Options Socialising, cooperation, sharing, personal entertainment, attention economy – space for work & play, digital spend overtook traditional newspaper advertising spend in 2010
![Page 63: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/63.jpg)
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
![Page 64: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/64.jpg)
Whois
![Page 65: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/65.jpg)
GoDaddy
![Page 66: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/66.jpg)
Reasonable Expectations Have realistic expectations in terms of cost and development timelines
![Page 67: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/67.jpg)
Website Development - Step by Step
![Page 68: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/68.jpg)
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
![Page 69: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/69.jpg)
The Web Development Process
![Page 70: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/70.jpg)
Thank You!
![Page 71: Chapter 2 | Website design & development - pf](https://reader034.vdocument.in/reader034/viewer/2022042606/54b6feeb4a795998388b456c/html5/thumbnails/71.jpg)
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/