Web Design, 5 th Edition

Similar documents
Full file at

CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS

LECTURE 05 WEB DESIGN

2/1/2016. Discuss website usability essentials Explain principles of design Critique a website in terms of usability and design

Web Development & Design Foundations with HTML5

DIGITAL MEDIA IA (810)

Digital Media IA. EXAM INFORMATION Items. Points. Prerequisites. Grade Level. Course Length. Career Cluster. Performance Standards

Design Principles. The Four Basic Principles That Underlie Good Page Design

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives. Overall Design Is Related to the Site Purpose. Website Organization

Advanced Webpage Design

CRAP (Contrast, Repetition, Alignment, and Proximity) Graphic Design Principles

Enterprise Graphic Design

WEB PAGE ARCHITECTURE

FOUNDATION IN GRAPHIC DESIGN. with ADOBE APPLICATIONS

Design Principles. Advanced Higher Graphic Presentation. Professional Graphic Presentations by kind permission of

Designing a Web Site. Michelle Hulett

Web Manager 2.0 User s Manual Table of Contents

Visual Design and Imaging Alignment

Project 2 Logos. Project overview. Project objectives. Timing: 4 to 7 hours

Announcements. Term Paper due on Wednesday at the beginning of class Midterm #2 next Monday Fawzi Emad, Computer Science Department, UMCP

WRITING FOR THE WEB. UIUC Web Governance

GUIDELINES FOR WEB SITE DESIGN CHAPTER 10

Web graphics. Introduction

Shaw Academy Lifetime Membership. Winner will be announced at the end of the lesson

Learn About Design Principles AND COPYRIGHT RULES

PROJECT THREE - EMPHASIS

Assignment 1: Design Document

เพ มภาพตามเน อหาของแต ละบท. Basic of Web Design by Assoc. Prof. Churee Techawut and Dr. Ratsameetip Wita adapted into English by Dr.

Objective 203 Apply production methods to plan and create advanced digital media graphics projects. Course Weight : 25%

HIERARCHICAL ORGANIZATION

Flash Domain 2: Identifying Rich Media Design Elements

Long term Planning 2015/2016 ICT - CiDA Year 9

Graphic Design (Including Yearbook and Newspaper)

Frequently Asked Questions about Text and Graphics

EL DORADO UNION HIGH SCHOOL DISTRICT Educational Services

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of

ETSY.COM - PRIVACY POLICY

Essentials for Text and Graphic Layout

Introduction to Digital Communications

Contents. Contents iii

UNSW Global Website Branding Guidelines. Website Brand Guidelines

11 Database Management

::The Art of Multimedia:: Assignments*

Designing Research Posters. College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor

Format and Layout 8/31/2012. Using Visuals to Inform and Persuade

Grid. Skeletal framework to organize information making it clear and optimally accessible

WEBSITE TRAINING. Sarah Eagan Anderson 98 Director of Interactive Communications. Donna Dralus 89 Online Media and Web Coordinator

SECTION 1 - WHAT DO WE DO WITH YOUR INFORMATION?

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

Masthead Byline Font Orientation. White space Contrast Placement Body. Alignment Caption Drop capital Alley

Web Site Design Principles

Brand Identity Guide. September 2017

Part 1 The Elements of Design. Lines

itunes U Guidelines Creating your itunes U site

Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)

EasyTech Scope & Sequence for Grades K 8

SECTION 1 WHAT DO WE DO W ITH YOUR INFORMATION?

WRITING FOR THE WEBSITE

Higher National Unit specification. General information for centres. Digital Imaging: Advanced Bitmap Techniques. Unit code: F6BS 35

Final Study Guide Arts & Communications

COMSC-032 Web Site Development- Web Design. Part-Time Instructor: Joenil Mistal

Web Design, 5 th Edition

Graphic Design Starter Pack

Step 10 Visualisation Carlos Moura

Assignment 2: Website Development

If these steps are not followed precisely as demonstrated in this tutorial, you will not be able to publish your site!

Identity Standards Manual for Mississippi Department of Education

SAMPLE COURSE OUTLINE DESIGN GENERAL YEAR 11

Joomla! extension JSN EasySlider User Manual

User Experience. 10 Principles to Ensure a Great. on your Website. Issue 3. An Appnovation Digital ebook

Multimedia Design Principles

WebDev. Web Design COMBINES A NUMBER OF DISCIPLINES. Web Development Process DESIGN DEVELOPMENT CONTENT MULTIMEDIA

communication design and the web John Zimmerman HCI Institute and the School of Design, Carnegie Mellon University 17 November 2010

Edexcel CiDA Course Overview

ATTENTION TO COME/ISE 491/492 STUDENT

Brooklyn City School District Technology Learning Targets Checklist

Multimedia Design Guidelines MMP

Workshop with ROCKWOOL editors. Helle Jensen, Senior ux consultant

Web Design, 5 th Edition

University of Manitoba Web Standards Guidelines

Certificate in Web Designing

Designing Effective Presentations

ADDENDUM. PRINCIPLES OF DESIGN COURSE Topic YouTube link QR Code

Multimedia Design and Authoring

MARKET RESEARCH AND EVALUATION2017. Reporting Guidelines

NPR.ORG - PRIVACY POLICY

Multimedia Design Principles

WHAT PERSONAL INFORMATION WILL BE COLLECTED FROM COMMUNITY MEMBERS OR APPLICANTS?

Visual Style Guide. February 2014

Your Step-By-Step Guide to Creating Content that Converts

PRODUCTION PHASES CHANGES

Design Elements and Principles. Tutorial Questions

BPS Suite and the OCEG Capability Model. Mapping the OCEG Capability Model to the BPS Suite s product capability.

2

Using CSS in Web Site Design

ICDL Managing Online Information Syllabus Version 1.0

Writing for the Web and. Blogging. Day 2 Social Media Marketing Intensive. Sandra Mardenfeld sandramardenfeld.com

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1

Essential Graphics/Design Concepts for Non-Designers

Burnaby Online Program School District #41 Burnaby

Transcription:

2 Web Publishing Fundamentals Web Design, 5 th Edition Chapter Objectives Describe the advantages of web publishing Discuss basic web design principles Define the requirements for writing for the web Explain the use of color as a web design tool Identify web publishing issues Chapter 2: Web Publishing Fundamentals 2 Advantages of Web Publishing Web publishing offers distinct advantages over print Currency Connectivity Interactivity Cost Delivery The Currency Advantage Websites can be updated continuously, while print publications are only as current as their date of publication To keep visitors on your site, always supply timely, changing material USATODAY.com Chapter 2: Web Publishing Fundamentals 3 Chapter 2: Web Publishing Fundamentals 4 The Currency Advantage The Connectivity Advantage The web s connectivity advantage, or ability to instantaneously distribute and share content Streamlines the writing process Chapter 2: Web Publishing Fundamentals 5 Chapter 2: Web Publishing Fundamentals 6 1

The Interactivity Advantage Internet and web technologies promote data and resource sharing Main ways to interact: Page of contact information Blogs Web-based forms Member pages The Interactivity Advantage Chapter 2: Web Publishing Fundamentals 7 Chapter 2: Web Publishing Fundamentals 8 The Cost Advantage Web publishing is more cost effective than print publishing Colorful designs, photographs, and text can be included in a webpage for considerably less cost Don t forget to consider file size, space limitations, and load time The Delivery Advantage Distributing information via the web can be fast and inexpensive With the same immediacy and cost, the web can reach both global and local audiences Consider the web when the need exists for economical and rapid distribution of information Chapter 2: Web Publishing Fundamentals 9 Chapter 2: Web Publishing Fundamentals 10 Basic Web Design Principles Three things to consider when designing a successful web publication that will leave a distinct impression: Balance and proximity Contrast and focus Unity and visual identity Arrange web elements symmetrically (centered and balanced) to suggest a conservative, safe, peaceful atmosphere Avoid too much symmetry Arrange web elements asymmetrically (off balance) to create an energetic mood Asymmetrical designs typically do not adapt well to mobile devices Chapter 2: Web Publishing Fundamentals 11 Chapter 2: Web Publishing Fundamentals 12 2

Proximity (closeness) is closely associated with balance Elements that have a relationship should be placed close to each other White space can help define proximity and organize webpage elements Chapter 2: Web Publishing Fundamentals 13 Chapter 2: Web Publishing Fundamentals 14 Contrast and Focus Contrast is a mix of elements to stimulate attention Use different text styles, colors, and size Chapter 2: Web Publishing Fundamentals 15 Chapter 2: Web Publishing Fundamentals 16 Contrast and Focus Focus is the center of interest or activity A webpage needs a focal point This is where you want your visitors to focus their attention Create webpages with contrast to elicit awareness and establish a focal point, the center of interest or activity All pages at a website must have unity, a sense of oneness or belonging, to create the visual identity Create unity with consistency and repetition throughout a website Chapter 2: Web Publishing Fundamentals 17 Chapter 2: Web Publishing Fundamentals 18 3

Alignment is the arrangement of objects in fixed or predetermined positions Choose one method of alignment and use it regularly Chapter 2: Web Publishing Fundamentals 19 Chapter 2: Web Publishing Fundamentals 20 Visitors typically look for information with: Accuracy and currency Scannability Organization Chapter 2: Web Publishing Fundamentals 21 Chapter 2: Web Publishing Fundamentals 22 Accuracy and Currency Confirm the accuracy of your material with a reliable source Be sure to avoid spelling and grammar errors Indicate the date and time of the last update to your website Scannability Make information easy to scan Use headings, subheads, and bulleted lists Chunked text Chapter 2: Web Publishing Fundamentals 23 Chapter 2: Web Publishing Fundamentals 24 4

Organization Write your copy in the inverted pyramid style Color as the Web Design Tool Color can be a powerful design tool The color wheel can help you choose effective and appealing color combinations Primary colors Secondary colors Cool colors Warm colors Complementary colors Chapter 2: Web Publishing Fundamentals 25 Chapter 2: Web Publishing Fundamentals 26 The Color Wheel The RGB Color System Monitors project color using the RGB color system Combines red, green, and blue light Levels of intensity are measured from 0 to 255 A monitor s color depth is the actual number of colors that a monitor displays The hexadecimal system uses 16 symbols to signify values Chapter 2: Web Publishing Fundamentals 27 Chapter 2: Web Publishing Fundamentals 28 Target Audience Expectations Certain colors have come to symbolize particular qualities Keep in mind the qualities generally associated with different colors when selecting colors for your website Review several commercial and noncommercial website color schemes Web Publishing Issues Successful web publishing includes recognizing the following issues: Technical Legal and ethical Accessibility Usability Design techniques Chapter 2: Web Publishing Fundamentals 29 Chapter 2: Web Publishing Fundamentals 30 5

Technical Issues Technical Issues Bandwidth is the quantity of data that can be transmitted in a specific time frame Keep file sizes to a minimum Corel Paint Shop Pro X6 or Adobe Photoshop CS6 can decrease image file size Browser differences Graphical vs. non-graphical display Alternative text Screen Resolution The measure of sharpness and clarity A pixel is a single point in an electronic image Page elements display differently at different resolutions When designing websites for mobile devices, you must account for a smaller screen size and the auto-rotate feature included in many smartphones and tablets Chapter 2: Web Publishing Fundamentals 31 Chapter 2: Web Publishing Fundamentals 32 Technical Issues Mobile Versions Creating a mobile phone version of your website is another way to ensure you reach visitors of your site Web design experts discourage the creation of mobile website versions, and recommend responsive web design techniques to create device-independent websites Chapter 2: Web Publishing Fundamentals 33 Chapter 2: Web Publishing Fundamentals 34 Legal and Privacy Issues Legal Issues Easy to acquire images from the web Make sure the material on your website is free of copyright infringement Ownership of intellectual property Obtain permission from the owner to use any copyrighted material Protect your work by copyrighting your material Copyright notice Legal and Privacy Issues Privacy Issues Cautiously give out personally identifiable information (PII) Encryption Decryption Secure Sockets Layer (SSL) Cookies Privacy policy statement Chapter 2: Web Publishing Fundamentals 35 Chapter 2: Web Publishing Fundamentals 36 6

Legal and Privacy Issues Accessibility and Usability Issues Web accessibility deals with ensuring access to web-based information Web usability involves designing a website and its pages so that all visitors to the website can easily and quickly satisfy their goals Web designers incorporate user experience (UX) practices into webpage design Chapter 2: Web Publishing Fundamentals 37 Chapter 2: Web Publishing Fundamentals 38 Chapter Summary Describe the advantages of web publishing Discuss basic web design principles Define the requirements for writing for the web Explain the use of color as a web design tool Identify web publishing issues 2 Web Publishing Fundamentals Web Design, 5 th Edition Chapter 2: Web Publishing Fundamentals 39 7