Wireframing Web-based Systems | Misbhauddin 2 Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the.

Slides:

Advertisements

Similar presentations

Jeppesen Proprietary Intersessional Correspondence Group Document Sharing Platform Michael Bergmann Director Maritime Industry Jeppesen Marine.

Advertisements

/ Reference Management Tools: Which One is Right for You? Yolanda Koscielski, Criminology & Psychology.

Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive.

Google Apps for Education. What Is Google Apps For Education? Sites (Webpages) Docs (Office Suite) Gmail ( ) Calendar Google Talk (Communications.

Agenda Overview of Silverlight Technology Map Suite Silverlight Beta Edition Features & Benefits Demonstration Where to Get Help and Learn More Q&A 2.

1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Flash Catalyst, html, Microsoft Sketchflow/Expression Blend, etc. Brad Myers

1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Adobe Illustrator, Adobe Fireworks, Balsamiq, OmniGraffle, html, etc. Brad Myers

. Website and file organization. How websites work.

SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.

Portfolio Anil Sutar Team Lead (User Interface Design) CUA (Certified Usability Analyst - HFI Mumbai)

Instructional Technology & Design Office or Zotero & Mendeley Workshop Presented by Kate Rojas.

Information Architecture Week 7. Information Architecture QUIZ Please put your books away and get ready for this week’s quiz.

What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.

Web Design HTML CSS Creating Web Sites Design Principles.

The Designer-Developer Workflow Martin Tirion User Experience Evangelist Microsoft.

Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.

+ RSS Aggregation and Syndication. + Really Simple Syndication (aka, Rich Site Summary) Image source:

Instructional Technology & Design Office or Zotero & Mendeley Workshop Presented by Aisha Conner-Gaten.

16 March · Visual Vocabulary · 1 Visual Vocabulary: An Introduction Jesse James Garrett.

Wireframes & Mockups presents…. What is a Wireframe? a sketch or a guideline before you build actual website a “skeleton graph” that shows how the contents.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files.

 Simplify Your Life. Use Google Docs. ELIB 570 Final Presentation: Web 2.0 Tool.

LEARNING COMPUTER BASICS AND THE INTERNET Module 2 In the name of Allah, most gracious, most compassionate Iffat Ansari ICtech Teacher.

To arrange an interview, please contact at or call SANJAY KUMAR DEY Cell: I am UI & Gui Designer,

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

1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Balsamiq, InVision, html, etc. Brad Myers / / : Introduction to.

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

COM 263 Design Process. o Example: Tampa International Film Festival Web Site.

.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.

Information Architecture The science of figuring out what you want your Web site to do and then constructing a blueprint before you dive in and put the.

Notability. What is Notability Notability is a note-taking application built for the iPad. The latest version now allows you to sync with your dropbox,

Bibliography Managers Nick Guy, Ph.D. 25 August 2014 “Topics in Genetic Counseling”

INSTRUCTIONAL DESIGN JMA Review Principle Review Principle 2. Toolbook (Data) Toolbook (Data) 3. M-Learning M-Learning Objectives.

Merja & Pauli Rapid prototyping & other stuff.

Copyright 2006 Thomson Corporation ISI Web of Knowledge EndNote ® Web and EndNote ® Integrated solutions for research and publishing October 2006.

UX Homepage Wireframe with annotations – Rohit Maddipudi – 04/22 Legend: - Annotation; - Clickable object for display of more sectional information.

Annotating PDFs Best Practices and Use Peter Burns, Associate Publisher, Allen Press.

Review of Mid-Term All interfaces are up. Compare what others have done. Think about what you would have done differently with a design. Think about what.

Intro to Google Docs Table of Contents Video What is Google Docs? What can you do with it? Creating a new document Uploading an existing document.

Web Site Usability. Benefits of planning usability Increased user satisfaction, which translates directly to trust and brand loyalty Increased user productivity,

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

22C:082:001 Human-Computer Interaction. Fall Copyright © 2013 Juan Pablo Hourcade. 1 Group Project Phase 2.

2 pt 3 pt 4 pt 5pt 1 pt 2 pt 3 pt 4 pt 5 pt 1 pt 2pt 3 pt 4pt 5 pt 1pt 2pt 3 pt 4 pt 5 pt 1 pt 2 pt 3 pt 4pt 5 pt 1pt Adobe Photoshop Weebly Microsoft.

Web Development Process The Site Development Process Site Construction is one of the last steps.

Which one of these tools can NOT be used globally? A. Holt B. Mind42 C. Spinscape.

Web Foundations WEDNESDAY, OCTOBER 16, 2013 LECTURE 13: WIREFRAMING, CSS VENDOR EXTENSIONS, CSS POSITIONING LAB WALKTHROUGH.

Wireframes in Physical Design Yonglei Tao. 1-2 Website Wireframes  A visual guide that represents the framework of a website  Created for the purpose.

1 Manage your Research Articles : Using Mendeley & Zotero Winter Term 2012 Helen B. Josephine

Goplan. Team Project Tool GoPlan is an online project management and collaboration tool GoPlan is an online project management and collaboration tool.

AQB Explorer from HSN extra

Usability Tools & Testing. The Process Tools & Software Commercial OpenSource Hosting How to wireframe.

After viewing information about the Elements and Principles of Design from the powerpoint presentations, type the Element or Principle that you thing best.

What is a Wiki? A wiki is an online database that can be edited by anyone with access to it. “ Wiki ” is Hawaiian meaning ‘ fast ’ or ‘ quick ’

Dreamweaver is an XHTML editor that allows you to: Create a site Create external Cascading Style Sheets (CSS) to store the styles used in your pages Create.

Office 365 is cloud- based productivity, hosted by Microsoft. Business-class Gain large, 50GB mailboxes that can send messages up to 25MB in size,

Interaction Design Workshop BIME 591 Winter 2014.

© 2011 DigitalDay | MOBILE WEB INFORMATION ARCHITECTURE Best Practices Workshop 1.

University of Washington HCDE 418 Wireframes HCDE 418.

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

Download Free PSD File

Royalty Free Background Textures

>> Web Development Process & Technologies

Introduction to Wireframing

Affordable Adobe Presented by: Gail Dunn

Julie Nanavati, MLS, MA Clinical Informationist

Overview of Dreamweaver

Digital Tools for Interior Design

Structural / Functional Site Diagramming

What is a CMS. CMS is content management system CMS is a software that stores content.

ورود اطلاعات بصورت غيربرخط

Presentation transcript:

Wireframing Web-based Systems | Misbhauddin 2

Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the important information in a page {goal} Reflect importance of different elements, including the content and the navigation on the page Web-based Systems | Misbhauddin 3

Types of Wireframes Web-based Systems | Misbhauddin 4 Wireframes Low-Fidelity High-Fidelity rough sketch or a quick mock-up less detail quick to produce Detail matches actual webpage Takes longer to create Used in documentation

Wireframing Techniques/Tools Web-based Systems | Misbhauddin 5 UI Kits / Stencils Adobe Illustrator AI, Vector EPS Adobe Photoshop PSD Difficulty in Collaboration Time Consuming Online Tools Specific Diagramming Built online right in the browser Easy to Collaborate Faster Offline Pen & Paper Desktop Application

Wireframing Techniques/Tools Web-based Systems | Misbhauddin 6 wireframe-kit/ wireframe-toolkit/ wireframing/webpage-wireframe-stencil UI Kits / Stencils

Wireframing Techniques/Tools Web-based Systems | Misbhauddin 7 1 project with 10 pages; 2 users; no archived projects Free/Paid 1 project; 1GB space; 2 users Paid$9/mo; 10 projects; 1GB space Free/Premium Single page Paid 30-Day Free Trial Free for Students (Invited by Instructor Online Tools >> Specific Free

Wireframing Techniques/Tools Web-based Systems | Misbhauddin 8 1 folder with 25 sheets; 15 users; Free/Paid 5 diagrams; 2mb space; 0 users Online Tools >> Diagramming Free/Paid 60 objects/diagrams; 25mb space; 1 users

Wireframing Techniques/Tools Web-based Systems | Misbhauddin 9 $99; 15-Day Free Trial FlairBuilder Paid $49.99; Mac & iPad; Offline Tools >> Desktop Applications Paid OmniGraffle Adobe Fireworks Paid £282.9; 30-Day Free Trial $ $999; 60-Day Free Trial Paid PowerMockup PaidPowepoint Plugin; Trail Version Available

Sample -1 Web-based Systems | Misbhauddin 10

Sample -2 Web-based Systems | Misbhauddin 11