LAYOUT Form is a cage in which to trap meaning.. tt.

Slides:

Advertisements

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

Advertisements

Microsoft Word By: Phuong Nguyen.

Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.

CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For.

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

Principles of Graphic Design with some background on Web 2.0 styles.

SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.

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

A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.

 Helps you create individual pages according to your thumbnail plan  Helps you organize your web pages and links according to your organizational chart.

Office 2003 to Office 2007 Transition. What’s New?  New GUI groups commands better  Better access to templates  Tabbed documents  Enhanced sorting.

Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.

Redesigning CASA, Fairfax ANMOL PRADHAN NILAY SANGHAVI ANISH GUPTE ELRON D’SILVA.

DESIGNING FOR IOS. iOS uses the following themes:  Deference. UI helps users understand and interact with the content, but never competes with it.

Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Flash Domain 2 KellerAdobe CS5 ACA Certification Prep Flash Domain 2: Identifying Rich Media.

Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.

WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!

Web Site Storyboard Honors College & Extended Degree Programs For ABED 4118: Web Page Design Summer 2008 (Independent Study) Professor Sunil Hazari By:

Microsoft Expression Web - Illustrated Unit B: Creating a Web Site.

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

Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.

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

Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.

Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 2: Banking Site.

Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.

Dawn Pedersen. Audience Every site's ultimate aim is to communicate something to its users. If your website doesn't communicate what you want it to, your.

IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure

OARE Module 5A: Scopus (Elsevier). Table of Contents About Scopus (Elsevier) Using Scopus Search Page Results/Refine Search Pages Download, PDF, Export,

Homepage-Parent page Who: has logos, copyright notification and clearly identifies who owns the site. What: Summary text and images that show visitors.

Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.

CSS BEST PRACTICES.

Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.

Chapter 2 Emphasis…. Objectives Appreciate the importance of the principle of emphasis. Consider the effect of emphasis in a design. Learn what visual.

Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables.

Presented by: Rashedul Chowdhury Contributors: Anthony Ritrivi, Hegde Mahabaleshwa and Long Pham GES DISC UWG May 11, 2011 GES DISC Homepage Redesign.

?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.

3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.

With a focus on screen design and CRAP. The Joshua Tree Epiphany.

Information Architecture

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

Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.

Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.

Web design Guidelines to design your own website..

Creating Websites With Macromedia Dreamweaver MX 2004 By Heidi Lee.

Jim Zimmerman Recent Work At Citi. Recent Work Most Recent Project: Redesign of Information Portal for the Citi Business Activity Warehouse. Old Portal.

{ User Centered Design Final Presentation Donia Canaveral }

Creating a Google Site For a Digital Portfolio Purpose.

Adobe Flash Professional CS5 – Illustrated Unit A: Getting Started with Adobe Flash Professional.

Unit 15 – Web Authoring Web Authoring Project.

Section 6.1 Section 6.2 Write Web text Use a mission statement

OVERVIEW Objectives Follow a design document to create a small personal Web site Follow a design document to create pages in a large commercial Web site.

201 exam demystified Anna Gabali.

AN Storyboard and Wireframes

Chapter 4 Adding Images.

How to make a website in dreamweaver a website

Getting Started with Dreamweaver

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

Page plans A01 Design.

My Personal Photo Website --Final project

Session I Chapter 18 - How to Design a Web Site

Tutorial 3 – Creating a Multiple-Page Report

Graphic Communication

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

Jordan McKinley - Nichols

UI, UX: Who Does What? A Designers guide to the tech industry.

A02 Creating my website NAME ______________.

Advance Web Sites.

Student portfolio wireframing & key principles

Presentation transcript:

LAYOUT Form is a cage in which to trap meaning.

tt

tt What meaning is being trapped in this cage? Just the content... ?

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid 

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... Content

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation Secondary Navigation

Start with a grid. Nathan Smith: 960.gs960.gs Big ol' download button 12/16/24-column grid templates for PDF, PhotoShop, Fireworks, Flash, Illustrator, etc. 12-column grid  Place the biggest item first... and then play! Content Logo Primary Navigation Secondary Navigation Etcetera

1-Column Layouts

1-Column Website with Extended Horizontal

1(+)-Column 1-Page Website Visionary Vanguard Simon Kern The Dangers of Drug Driving The Space In-Between

2-Column Layouts

If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color—a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout.

3-Column Layouts

4-Column Layouts

5-Column Layout (?)

Refined Wireframe Update your wireframe sketch into a refined wireframe to figure out content layout and hierarchical structure given your chosen approach.

ORIGINAL AND INNOVATIVE LAYOUTS WEBBY AWARD-WINNING LAYOUTS Groovey stuff to look at:

ICE: 5-MINUTE LAYOUT REDESIGN 1.Redesign the layout of the home page of: Include ALL the functionality on the page: Logo, navigation, content, shopping bar, etc. Use one of these layout types: N-column (where N = 1-4) Extended horizontal One-page site Or something else entirely 2.Draw a wireframe sketch of your redesign; label areas. 3.Present your results to the class.

THE STANDARD WEBSITE LAYOUTTHE STANDARD WEBSITE LAYOUT (6) Movie time!