Đang tải... (xem toàn văn)
• Site Map Generation - A useable sitemap is created that contains a page by page index of the content information structure in.. flow-chart form.[r]
(1)1
HTML + CSS plus
(2)2 Contents
(3)The Plan for Site Development
Course Project:
The “About Me” site
(4)The Plan for Site Development
Phase Information Architecture
Phase Design
Phase Development
(5)The Plan for Site Development
Phase Information Architecture Project
• Discovery - High-level discovery meeting between the web company and the client Define functional requirements
• Site Map Generation - A useable sitemap is created that contains a page by page index of the content information structure in
flow-chart form
(6)The Plan for Site Development
Phase 2: Design
• Creative Discovery - Discuss the site
audience, user needs and brand guidelines
Quality Assurance - review and progress
report
• Wireframing - List all design elements that • are to be displayed on the home page
• Generate Mockups – “Pictures” of the final design (can be sketches or finished products) • Production ready designs - Production ready
(7)The Plan for Site Development
Phase 3: Development
• Technical Discovery - validate the technology requirements
• Technical Collaboration / Client Review
Session - Client review and progress
report
• SEO Plan - the URL's, page titles, meta data, etc
(8)The Plan for Site Development
Phase Information Architecture Project
• Discovery - High-level discovery meeting between the web company and the client Define functional requirements
You can think of Phase as the “Business Plan” for the website.
Let’s work in groups of two to fill out the:
(9)The Plan for Site Development
Phase Information Architecture Project
• Site Map Generation - A useable sitemap is
(10)Site Map examples
(11)Site Map examples
(12)Cấu trúc website – phân cấp
(13)Site Map examples
(14)Cấu trúc website – nối tiếp
(15)Cấu trúc website – mạng nhện
(16)Creating a digital version of your site map in Illustrator
Window Drop-down:
opens all menus checked
Stroke (outline) menu
Swatches (color) menu
Type (fonts) menu
Type tool (“LETTER T”)
Select object too (black arrow) Draw shape tool
(17)The Plan for Site Development
Phase Information Architecture Project
(18)Gather and organize the Resources for your site
List of Links appearing on each page
List graphics for each page
•Logos
•Bullets and icons
(can use place-holders)
List of media for each page
• Animation • Sound
(19)The Plan for Site Development
Phase 2: Design
• Creative Discovery - Discuss the site audience, user needs and brand guidelines
• Quality Assurance - review and progress report
Branding the site:
• Logo creation and optimization • Color scheme choices
(20)Logo designs
• What are others in your industry doing? • Can you use symbols?