Introduction to Wireframing

Slides:

Advertisements

Similar presentations

Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There.

Advertisements

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.

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.

 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.

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

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.

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

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

Web Technologies Website Development Trade & Industrial Education

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

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.

Introduction to Web Page Design. General Design Tips.

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.

Page Design Issues IWM 14 Information Services for the Web.

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.

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.

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

DMT612 Professional Preparation EFFECTIVE WEB DESIGN.

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.

>> Web Development Process & Technologies

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

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

Introduction to Designing a Website

Introduction to Designing a Website

LESSONS 13, 14 & 15 Module 4: Working with Images Final Project.

201 exam demystified Anna Gabali.

Overview of Flash.

Project Objectives Lay out Web pages Create layers

Unit 3 – Web design Final Project

Basics of Website Development

Webpage Layout and Website Design

Professional Template for a poster presentation

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

Copyright © 2013 MyGraphicsLab / Pearson Education

Web Design and Development

Thumbnail Sketches “Thumbnail sketches” are quick sketches used to communicate visual ideas for creative work before time is invested in the project.

Page plans A01 Design.

Fixed Positioning.

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

PRESENTATION LAYOUTS This is a title slide

Multimedia and Internet Technology

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

Website Planning EIT, Author Gay Robertson, 2018.

HTML Text editors and adding graphics

Design Considerations

Defining Presentation Software

Wordpress test.cs.edinboro.edu.

Defining Presentation Software

LO4 – New This Year and Find Out More

Multipage Sites.

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.