FOUR PRINCIPLES OF DESIGN PRINCIPLES OF EFFECTIVE WEB
FOUR PRINCIPLES OF DESIGN
PRINCIPLES OF EFFECTIVE WEB DESIGN Simplicity Visual Hierarchy Navigability Consistency Accessibility
INTERNET GROWTH 1 billion webpages 4 billion users 51. 7% penetration rate Linear vs. exponential increase 60% of small and medium businesses do not have a corporate website
CONTENT MANAGEMENT SYSTEMS Easy implementation Low cost Limited web programming knowledge
CMS STRUCTURE 1. Content files 2. Hosting provider to store files 3. Linked database to store website information Back-end: where files or other aspects can be added, deleted, or modified Front-end: what the visitor sees
CMS ANALYSIS Choices: Word. Press, Joomla!, Drupal 1. Market share 2. Cost options 3. Functionality 4. Extensions 5. Security 6. Example site analysis (simplicity, visual hierarchy, navigability, consistency, accessibility)
CMS SITE Simplicity Visual Hierarchy Navigability Consistency Accessibility
WORDPRESS VERSIONS AND UPDATES Version 4. 6. 2 (28 updates) Update highlights 1. 2 post previews 2. 1 auto-save 2. 9 built-in image editor 3. 3 drag-and-drop uploader 4. 5 responsive images
TYPES OF WORDPRESS SITES Blogs/personal websites Business website e. Commerce Job board Business directory Nonprofit Portfolio Online communities Auctions Knowledge base/wiki websites Podcasting websites Photography websites School or college websites
IMPLEMENTATION STEPS 1. Hire a hosting provider that includes a database (i. e. My. SQL) 2. Create the CMS database 3. Download CMS installation package and extract files 4. Install CMS with installation wizard, linking with database
WEBSITE WORKFLOW PHASES 1. Define site goals Establish schedule, budget, timeline, technical needs, visual style, and content structure 2. Develop site structure Sitemap Diagram of the site’s hierarchy Sitemap tools (Balsamiq, Moqups, Axure, Writemaps. Gloo. Maps) Wireframe Blueprint for single page Used to create placeholders for content Wireframe tools (Mockflow) 3. Design and production Designer and programmer work in collaboration to implement design elements Client approval of drafts
WEBSITE FLOWCHART
WEBSITE WIREFRAME EXAMPLE
WEBSITE WIREFRAME TEMPLATE
INTERACTIVE MULTIMEDIA WEBSITE Landing page logo (Adobe Photoshop) 5 -7 pages of content Embedded podcast (Adobe Audition) Embedded You. Tube/Vimeo clip (Adobe Premiere)
WEBSITE PROJECT REQUIREMENTS Homepage logo Social network integration Search module Contact form Audio Video Calendar widget
CLASS WEBSITE www. gcuwebdesign. wordpress. com
- Slides: 17