Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.

Slides:

Advertisements

Similar presentations

Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising.

Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

IPM THEORY CHALLENGE QUIZ NUMBER 3 Unit 3 Outcome 2.

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Problem solving methodology Information Technology Units Adapted from VCAA Study Design - Information Technology Byron Mitchell, November.

UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.

Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.

Certificate in Digital Applications – Level 02 Website Design and Creation.

Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Macromedia Dreamweaver 4 Foundation Level Course.

Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.

Lesson 21 Getting Started with PowerPoint Essentials

3.2 Presentation Software End Show Creating slide shows including audio,video and digital images End Show.

The Website Design Process

Purposes of data visualisations Term 2 – Week 10 VCE IT – UNIT 2.

Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

Chapter 14 Web Design © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

The Software Development Cycle Defining and understanding the problem.

1 After completing this lesson, you will be able to: Define your goals for a Web site. Analyze your audience. Create a blueprint for your Web site. Design.

Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.

Developing a solution using spreadsheet software Using the problem solving methodology: analysis, design, development & evaluation.

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.

Systems Analysis and Design in a Changing World, 6th Edition

Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?

Key Applications Module Lesson 19 — PowerPoint Essentials

Understanding the Web Site Development Process. Understanding the Web Site Development You need a good project plan Larger projects need a project manager.

Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

What is Multimedia?. Today’s objectives Define multimedia Work with XHTML Work with CSS.

The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.

Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.

Website Development with Dreamweaver

Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;

Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,

XP New Perspectives on Microsoft FrontPage 2002 Tutorial 1 1 Microsoft FrontPage 2002 Tutorial 1 – Introducing FrontPage 2002.

Multimedia Design 1. 2 Objectives By completion of this session, you will be able to: Organize your multimedia project Develop Flowcharts and Storyboards.

Problem solving methodology Information Technology Units Adapted from VCAA Study Design - Information Technology Byron Mitchell, November.

Introduction to Web Page Design. General Design Tips.

Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.

Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.

Problemsolving Problem Solving – 4 Stages Analysis Design Development Evaluate (ADDE) Note: In this unit Evaluate is not covered in depth.

Start Dreamweaver program From file menu click new Blank page appears.

Software. A web site is a collection of web pages on a particular topic. A web page is a document written in HTML code. Web pages are linked together.

Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.

12/15/20151 WEBSITE CREATION DOING IT MANUALLY. 12/15/20152 PURPOSE of WEBSITE To give colleagues and prospective employers some information about your.

Design tools: representing the functionality and appearance of solutions.

Storyboard, Design, Layout.  Create storyboards  Decide upon navigation  Prepare short page summaries.

Web Site Development - Process of planning and creating a website.

Learning Aim B.  It is a good idea to think carefully about the design of a website before you try to implement it.

introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.

By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.

1. Storyboarding a Website. How to start a storyboard: Have Blank Squares!

Web-based structures, links and testing

Section 7.1 Section 7.2 Identify presentation design principles

Chapter 2 Developing a Web Page.

Chapter A - Getting Started with Dreamweaver MX 2004

Unit 17 Website Development

WEBSITE DESIGN TOOLS.

Copyright © 2013 MyGraphicsLab / Pearson Education

Web Design and Development

Layout - you need to understand that a simple navigation bar:

Lesson 21 Getting Started with PowerPoint Essentials

Unit 14 Website Design HND in Computing and Systems Development

Website Planning EIT, Author Gay Robertson, 2018.

VCE IT Theory Slideshows

COM 205 Multimedia Applications

Presentation transcript:

problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a range of functional design tools can be used to show the functionality of the website. IPO Charts

problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Flowcharts; 4 symbols

problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Layout diagrams

problemsolving 2 Problem Solving: Designing a website solution Website map

problemsolving 2 Problem Solving: Designing a website solution Storyboard

problemsolving 2 Problem Solving: Designing a website solution Techniques web developers can use to ensure website is efficient: –Templates and cascading style sheets, (use of common formats on every page) –Use of thumbnails Effectiveness –Check appearance in different web browsers for appearance changes –Allowing colour of a visited link to change when visitor has clicked on it –Consistent layout throughout website –Clearly displayed information on pages

problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function –Information architecture, structure of website and its navigation pathways and a website map represents this.

problemsolving 2 Designing a website solution Navigation Design Placement of navigation bars Accessibility of website; labels of icons meaningful, use of common icons; navigation appear on every page Use of a style guide File naming conventions –Index page is first page, eg. index.htm –Filenames short and meaningful –Limited to 16 characters

problemsolving 2 Designing a website solution Identifying how a solution will appear using design tools Mock-up diagram –sketch of actual website –Picture or webpage will look like, eg. layout, colors, fonts, general graphics Layout diagrams –Visual representation of how final product should look –Drawn by hand and contain information where text and graphics located Storyboard designs –Design features of each individual page

problemsolving 2 Design - Format & Conventions Screen size Index or home page; contact , date last modified, author or company’s name & contact Scrolling Text Navigation Font selection Images and file size Style guides

problemsolving 2 Design - Evaluation Criteria Does the solution meet the needs of the organisation Completed often after website been accessed and used Use efficiency and effectiveness as a scaffold

problemsolving 3 Developing a prototype website A prototype website demonstrates navigation options, a user interface and the overall functionality of a website Development stage of PSM involve: 1Using validation: Manual & electronic 2Manipulation to build a solution –Image compression –Cascading style sheets –Meta tags

problemsolving 3 Developing a prototype website Testing the prototype solution: –Function Webpages load up Navigation design works Relative & absolute links work Images load –Appearance Acceptable formats & conventions applied Meets gender, special & cultural needs of users Navigation bar easily identified on every page Bottom of each page clear indication of who created it