Design Basics & Usability Shelley Paulson June 1, 2005.

Slides:



Advertisements
Similar presentations
Web Page Design Critical Elements for a Well Designed Web Page.
Advertisements

UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Do You Want an OmniUpdate Faculty Web Site? The OmniUpdate Template for Faculty Web Sites.
Creating a Website Part Two Navigation. Creating Usable Navigation Provide enough location information to let the user answer the following navigation.
The Road to Redesign. Project Objective To redesign & reorganize the Carleton web site. To redesign & reorganize the Carleton web site.
© Anselm Spoerri Lecture 15 Short Course Review Term Project Evaluations Guiding Principles Summary.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.
Web Design HTML CSS Creating Web Sites Design Principles.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Website design Feng Zhao College of Educatioin California State University, Northridge.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.
+ Introduction to Wireframing. + Overview Storyboarding and wireframing your site before you start to code is another step in the website design process.
Web Development. Interaction Design How is information organized? How will people find their way around the site? How will people work with the information?
Designing Web Sites Using “tags” Tags are codes inserted among the text to tell the text how to behave Their format is very rigid; they always look like.
An Introduction To Websites With a little of help from “WebPages That Suck.
Web Design with HTML & CSS Lesson 1. Planning Your Website   Good design comes from decisions that designers make in order to have a certain effect.
4 Simple Web Design Rules. Your Web Site Should Be Easy To Read  Choose your text and background colors very carefully  Don't use backgrounds that obscure.
Modifying and Optimizing Web Graphics Holly Quarzo Ideas in motion.
© Anselm Spoerri Multimedia Production Lecture 1 Setting the Stage Course Goals Gameplan Examples from Previous Courses Summary.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Louisa Lambregts, Louisa Lambregts
Creating a Web Site Review of Concepts. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the.
Creating interactive web pages using Fireworks Creating a 5 page mock up.
An Industry Case Study SES – Chicago: 2006 Web 2.0.
Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas.
Exploring Microsoft Microsoft FrontPage Chapter 21 Exploring Microsoft FrontPage 2002 Chapter 1 Creating a Home Page: Introduction to MS FrontPage.
CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman.
PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver.
Art for New Media 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.
Louisa Lambregts, Louisa Lambregts
Louisa Lambregts, Louisa Lambregts
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
CSE3310: Web training A JumpStart for Project. Outline Introduction to Website development Web Development Languages How to build simple Pages in PHP.
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.
Library Instruction Services Redesign Danielle Skaggs Fall 2006.
Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.
Review session for Web development. Today’s class Review the web designing. Filling out instructor evaluation form.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
Unit 15 – Web Authoring Web Authoring Project.
Unit 15 – Web Authoring Web Authoring Project.
PLEASE USE THIS TEMPLATE TO CREATE PRESENTATIONS USING THE WVU BRAND.
MIT 511- Web Design & Usability
Art for New Media TO DO today: 1 - Saving your work, using with Dreamweaver CSS style sheets, externally linked Work on Photoshop Animation.
Pre-Production Meet with the client to create a project plan:
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.
Chapter 2 Developing a Web Page.
Project Objectives Lay out Web pages Create layers
Unit 3 – Web design Final Project
LESSON 4 Module 4: Working with Images Navigation Tools.
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Introduction to Wireframing
Graphics.
Term Project Evaluations Guiding Principles Summary
Page plans A01 Design.
PLEASE USE THIS TEMPLATE TO CREATE PRESENTATIONS USING THE WVU BRAND.
Assignment (Due by Friday, Jan. 10)
Principles of Web Design 5th Edition
Multimedia and Internet Technology
Jordan McKinley - Nichols
Chapter 4 Planning Site Navigation
Designing Web Site Layout Using Fireworks
Presentation transcript:

Design Basics & Usability Shelley Paulson June 1, 2005

Introduction Started Summerset Studio in January, 2003 Design-Photography-Video Previously: –Johnson Bros (Director of Communications) –RedStar Creative (Interactive Director) –Bennett Office Technologies (Web Designer/Developer) Web designer since 1996

BDK

Design Basics Start with a concept Let your layouts breathe Find a balance Create a focal point Prioritize content Keep it simple Choose a color palette Limit typeface usage Design with CSS Reinforce Branding

Usability Don’t mess with what people know –Form Buttons –Links –Navigation Keep it simple Provide instructions Scannable Text No skip intro pages!

Show and Tell

View the redesigned page

My Process Design research –coolhomepages.comcoolhomepages.com –designinteract.com/sowdesigninteract.com/sow –digitalrefueler.com (“sites we love” section)digitalrefueler.com –misspato.commisspato.com –cssvault.comcssvault.com –stylegala.comstylegala.com

My Process Sketching –Yep, paper and pencil –You don’t have to be an artist –Saves a bunch of time

My Process Mock up Design in Fireworks –Design home page –Include all the elements, including dummy text –Send proof to client as a jpeg –After home page approval, design secondary page

My Process Slice and dice –Slice up home page and secondary page design in Fireworks –Export html just for the rollovers –Rebuild page in Dreamweaver –Create templates for secondary pages

My Process Make it Dynamic –Create output pages in Dreamweaver with dummy content for output –Create applications, replace dummy content with cfml

Working with a Designer Collaborate - clearly define goals Provide sample output or spec output Be specific Leave room for creativity!

Resources How Design ( Creative Latitude (

Questions?