web development process the site development process site construction is one of the last steps

17

Upload: paul-nash

Post on 17-Jan-2016

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Development Process The Site Development Process  Site Construction is one of the last steps
Page 2: Web Development Process The Site Development Process  Site Construction is one of the last steps

Web Development Process

The Site Development Process

http://webstyleguide.com

Site Construction isone of the last steps

Page 3: Web Development Process The Site Development Process  Site Construction is one of the last steps

Interaction Designers | User Interface Designers

User Experience Designers

Visual (Graphic) DesignersDES

IGN

Scripting and Programming

HTML, style sheets, and graphic production

DEVELO

PMEN

TCO

NTE

NT

Content Strategist

Information Architect

Information DesignerMULTIMEDIA

Page 4: Web Development Process The Site Development Process  Site Construction is one of the last steps

Content strategy and creation INFORMATION DESIGN • the organization of content and how you get to it • supports the process of getting content , message, or functionality to the users

Content Strategist

-ensures all text (buttons, labels, long text) supports the brand identity and

marketing goals of company

Information Architect /Information Designer

- organization of content (frontend and backend)

Page 5: Web Development Process The Site Development Process  Site Construction is one of the last steps

Interface DesignInteraction Designers (IxD) | User Interface Designers (UI) | User Experience

Designers (UX)| Visual Designers | Information Architects

Page 6: Web Development Process The Site Development Process  Site Construction is one of the last steps

Interface DesignHow the page works (buttons, links, navigation, etc.)How visitors move through the content/siteUsability - how easily visitors can accomplish their

goals and the overall user experience

Interaction Designers (IxD) | User Interface Designers (UI) | User Experience

Designers (UX)| Visual Designers | Information Architects

Interface Design, Information Architecture, and visual design

are tightly entwined.

Page 7: Web Development Process The Site Development Process  Site Construction is one of the last steps

Understands the needs, desires, and limitations of the userUnderstand s how the site will be used, how it will solve problems

User research and testing reports- understand the user (audience)

Wireframe diagrams- Diagram indicating how the screen real estate is divided and used (shows functionality and content… navigation, search boxes, form elements)

Site diagram- Diagram of the structure of the site – how individual pages relate to one another

Storyboards and user flow charts- Demonstrates the steps it takes to accomplish tasks, possible options (traces the path of a typical user (persona).

Page 8: Web Development Process The Site Development Process  Site Construction is one of the last steps

The web - a visual medium

Presentation & Design - everything you see screen-graphics-type- colors- layout

Page 9: Web Development Process The Site Development Process  Site Construction is one of the last steps

Document Development / Production

Page 10: Web Development Process The Site Development Process  Site Construction is one of the last steps

Document Development/Production

Authoring/markup- process of preparing content for delivery online (HTML)

Styling- Arranging the appearance of the page (CSS)

Page 11: Web Development Process The Site Development Process  Site Construction is one of the last steps

Scripting and ProgrammingAdvanced web functionality (forms, dynamic content,

interactivity)- Add behaviors and functionality to elements in the page/browser

window. (client-side programming (javascript))

- php, ruby, python and ASP.NET (server-side)

MultimediaDynamic content (sound, video, animation, Flash)

Page 12: Web Development Process The Site Development Process  Site Construction is one of the last steps

Technologies associated with web development

HTML (markup language)

CSS (Cascading Style Sheets) (presentation & formatting)

JavaScript/DOM scripting (interactivity & browser behaviors)

Server-side Programming (CGI Script; JSP; PHP; VB.NET; ASP.NET; Ruby on Rails; ColdFusion) (form handling, dynamically generated pages, shopping carts, content management systems, databases) Back-end development

XML (robust set of rules for creating other markup languages)

Java (web applets | mostly enterprise-scale applications)

Page 13: Web Development Process The Site Development Process  Site Construction is one of the last steps

Frontend – appears in or relates directly to the browserGraphic design and image production

Interface designInformation design – related to user’s experienceHTML document and style sheet developmentJavaScript

Backend – programs and scripts that work on the server – makes pages dynamic and interactive

Information design – how information is organized on the server

Forms processing

Database programming

Content management systems

PHP, JSP, Ruby, ASP.NET, Java, etc.

Page 14: Web Development Process The Site Development Process  Site Construction is one of the last steps

•Client: requests & renders content (browsers, mobile devices, screen readers)

•Web Servers: Applications that deliver web content (IIS – Internet Information Service (windows) Apache (all OS, free, open source)

How the Web Works

HTTP Client HTTP Server

Retrieving Static Data

Page 15: Web Development Process The Site Development Process  Site Construction is one of the last steps

•Client: requests & renders content (browsers, mobile devices, screen readers)

•Web Servers: Configured to dispatch request to application server (triggered by extension- .cfm, .aspx, .php)

•Application Servers: talks to DB, generates response and returns info to web server. (compiles all elements and nodes needed from DB)

•Application Servers: Adobe Coldfusion (Java Based web application);

Microsoft Active Server Pages & ASP.Net; PHP (free, open source); Ruby On Rails

•Example - ColdFusion based CMS WebsiteWritten in ColdFusion Markup Language (CFML)- running on

server & HTML, CSS, JavaScript or JQuery – executed in the browser

Dynamic ContentHow Dynamic Web Content Works

Page 16: Web Development Process The Site Development Process  Site Construction is one of the last steps

Software

Web page authoring (Dreamweaver, Nvu)

HTML editors (NotePad, TextEdit, BBEdit, jEdit)

Graphics software (Adobe Photoshop (elements); Adobe

Fireworks; Adobe Illustrator; Corel Paint Shop Pro, GIMP)

Multimedia tools (Adobe Flash; QuickTime and iMovie; Apple

Final Cut Pro; Windows Movie Maker; Adobe After Effects; Sony

Sound Forge; Audacity)

Internet tools (browsers, mobile browsers, ftp programs)

Page 17: Web Development Process The Site Development Process  Site Construction is one of the last steps

Final Course Project Part 1: Project Profile

Part 2: Information Architecture

Part 3: Interface Design

Part 4: Development

Part 5: User-testing