+ Introduction to Wireframing. + Overview Storyboarding and wireframing your site before you start to code is another step in the website design process.

Slides:

Advertisements

Similar presentations

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.

Advertisements

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

Information Technology in Travel, Hospitality and Tourism

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.

Text and Graphic Layouts in Adobe Indesign

Keywords: BTEC IT, Subsidiary Diploma, Storyboard, House Style, Web Production, Peer Assessment Lesson Objectives: You will be able to DESIGN a Website.

 Steps how to design a web page using Microsoft Frontage Steps how to design a web page using Microsoft Frontage  Video related to the topic Video related.

Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.

Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.

Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.

OCR Nationals ICT – Unit 2 Task 1 Task Overview You need to produce a design for a multimedia website of at least five pages. The design will act as the.

Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.

Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.

Website Design - Review Layout using tables. Table exmaple James 11/08.

Website Designing Using Ms FrontPage FrontPage 2003 Create a Web site with FrontPage.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

By Danella Aguayo. DEFINITION SKETCH noun 1. A simply or hastily executed drawing or painting, especially a preliminary one, giving the essential features.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

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

Web Technologies Website Development Trade & Industrial Education

1 Essential HTML coding By Fadi Safieddine (Week 2)

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

11 HTML5 sharing St Bonaventure College & High School 31 May 2012.

An Introduction To Websites With a little of help from “WebPages That Suck.

Website Project Development Presentation by APNARAJ.COM.

Applications for Web Development (CIS 162) Intro to Web Design.

Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.

ITM 407: Human and Technology Interaction Management Chapter 9. Design Production Dr. Evren Eryilmaz.

Defining Presentation Software. Presentation Software A complete presentation graphics program used to produce a professional looking presentation.

Caprock Internet Services, INC. 1 Creating a Web Site with FrontPage Pasewark LTD.

7/8/04 1 Web Project Phase 3 - Sketches Use pencil and paper to sketch the layout of the pages in your web site Considerations – Placement of text? – Placement.

Web Site Design Plan Checklist Web Design Presented by: Angelo Russo #10 11/22/2014Angelo Russo #101.

Week 2- Overview of the internet The construction of a webpage Four Key Elements – how the internet works Elements and Design concepts Introduction to.

Principles of Web Design Keep it simple Content is critical--Form is not. Speed is “King”. Consistent filenames are key. Design efficiently. Cite your.

Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session.

 Used to give the presentation and professional, consistent look and feel  Stick to theme color palette.

Putting it all together: A web designers workflow.

Design Your Storyboard! This may be done on paper, but it is best created in a tool such as PowerPoint Here is the storyboard for my very short advert.

UNIT 3 – WEB DESIGN FINAL PROJECT – DAY 2 Exploring Computer Science – Lesson 3-11.

HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.

DMT612 Professional Preparation EFFECTIVE WEB DESIGN.

Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

Planning a Web Site Planning a Web Site. The Home Page Think of this as your storefront. It is the first thing seen by your customer when they log on.

 Define Wireframes, Mockups, and Prototypes  Techniques  Low vs. High Fidelity  Sketchy vs. Polished  Exercise: Define the Process.

Pre-Production Meet with the client to create a project plan:

Objective % Select and utilize tools to design and develop websites.

Overview of Flash.

Project Objectives Lay out Web pages Create layers

Unit 3 – Web design Final Project

Webpage Layout and Website Design

Professional Template for a poster presentation

Introduction to Wireframing

Objective % Select and utilize tools to design and develop websites.

Web Design and Development

Page plans A01 Design.

Fixed Positioning.

Directions These panels are interactively linked to each other. Clicking on a colored panel will jump to that panels corresponding content slide. You must.

Overview of Dreamweaver

Some Layouts have both Animated & Static. Main Title Page Animated

HTML Text editors and adding graphics

Defining Presentation Software

Defining Presentation Software

LO4 – New This Year and Find Out More

Webpage Layout and Website Design

Student portfolio wireframing & key principles

Presentation transcript:

+ Introduction to Wireframing

+ Overview Storyboarding and wireframing your site before you start to code is another step in the website design process. Both the storyboard and the wireframe pages are simple steps to help you plan your site, and then it becomes the blueprint from which you will follow.

+ Why Wireframe Consider all of the 3D animations in any of today’s movies. All of these computer generated graphics, started out on paper, then made their way to a wireframe model, and after that to the screen as the final product.

+ The Wireframe as a Website Development Tool The wireframe models for the movie is the blueprint for what the final graphic or CGI model will be. A wireframe is your blueprint for layout, text and image placement, navigation components, color scheme, and other webpage components. Instead of just jumping to a full-blown web design, take the time to create a wireframe to plan the sites layout. With a wireframe you and the client can point at things and have a mutual understanding of what is to be done.

+ Follow these steps to be able to create a wireframe. Keep it simple at the start. Follow a basic layout, such as left link or right link with a header and the content in the middle. Identify all of the links, if you are using color pencils or pens, pick a link color and stick to it. Identify your graphic image placeholders and note the sizes near them. Identify your content and content type. Remember that you are not putting content here, but content identification. Remember this will be a layout of where the webpage components will be placed. It is not a design pre-view. It will be generic or even ugly, but that is OK. Sketch out the layout to the best of your ability. The import thing is that this will be the blueprint for your webpage, and website.

+ Wireframing Examples

+ It is not a design pre-view.

+ It will be generic or even ugly, but that is OK.

+ Sketch out the layout to the best of your ability.

+ The Wireframe Handout

+ The Wireframe Handout Information For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc. This tool is a design canvas that is 1024x768px within the website area. The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.