WebDev Site Construction is one of the last steps The Site Development Process http://webstyleguide.com Web Design COMBINES A NUMBER OF DISCIPLINES DESIGN CONTENT Interaction Designers User Interface Designers User Experience Designers Visual (Graphic) Designers Scripting and Programming HTML, style sheets, and graphic production Content Strategist Information Architect Information Designer MULTIMEDIA DEVELOPMENT 1
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) Interface Design Interaction Designers (IxD) User Interface Designers (UI) User Experience Designers (UX) Visual Designers Information Architects Interface Design How the page works (buttons, links, navigation, etc.) How visitors move through the content/site Usability 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. 2
Design: (IxD, UI, UX) Understands the needs, desires, and limitations of the user Understand 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). Design: Graphic (visual) design The web a visual medium Presentation & Design everything you see screen graphics type colors layout Document Development / Production 3
Document Development/Production Authoring/markup process of preparing content for delivery online (HTML) Styling Arranging the appearance of the page (CSS) Scripting and Programming Advanced 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) Multimedia Dynamic content (sound, video, animation, Flash) 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) 4
Frontend appears in or relates directly to the browser Graphic design and image production Interface design Information design related to user s experience HTML document and style sheet development JavaScript 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. Retrieving Static Data How the Web Works 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) HTTP Client HTTP Server Dynamic Content How Dynamic Web Content Works 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 Website Written in ColdFusion Markup Language (CFML) running on server & HTML, CSS, JavaScript or JQuery executed in the browser 5
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) Course Description Final Course Project Part 1: Project Profile Part 2: Information Architecture Part 3: Interface Design Part 4: Development Part 5: User testing 6