Web Design For Dummies E-Book

Lisa Lopuck

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 451

Veröffentlichungsjahr: 2012

Beschreibung

Get up to speed on the newest technologies, tools, and possibilities in web design Have a great idea for a web site but don't know where or how to begin? Web Design For Dummies, 3rd Edition is an ideal starting point! Fully updated to cover the latest and the greatest in the world of web design, this fun-but-straightforward guide gets you caught up with everything you need to know to organize your ideas, create a template, start development, test to make sure everything is working properly, and launch your finished site. Packed with invaluable advice on incorporating social media aspects, linking content with social sites, and designing for mobile devices, this book will have you web designing like a pro in no time. * Highlights the many significant changes in the world of web design since the previous edition, including the introduction of HTML5, new technologies for sharing media, mobile web design, and more * Zeroes in on effectively using color, text, and navigation * Reveals helpful advice for avoiding common pitfalls * Details ways to connect with social sites like Twitter and Facebook Web Design For Dummies, 3rd Edition goes beyond just making a basic web site and instead encourages you to create a site that is appealing, practical, and useful.

Leseprobe

Web Design For Dummies®, 3rd Edition

Visit www.dummies.com/cheatsheet/webdesign to view this book's cheat sheet.

Table of Contents

Introduction

About This Book

Conventions Used in This Book

Foolish Assumptions

What You Shouldn’t Read

How This Book Is Organized

Part I: The Web Design Kick-Off

Part II: User-Friendly Design

Part III: Designing Web Graphics

Part IV: Producing the Final Website

Part V: The Part of Tens

Icons Used in This Book

I’m Here if You Need Me!

Part I: The Web Design Kick-Off

Chapter 1: So You’re Designing a Website

The People Involved

Business folks and clients

Producers and project managers

Information architects

Visual designers

Content developers

Media specialists

Web developers

Programmers

Getting Started in Web Design

Getting Experience

Chapter 2: From Concept to Execution

Phase 1: Definition

Understanding site goals

Gathering business requirements

Developing an RFP

Building a project plan

Phase 2: Design

Creating a sitemap

Developing wireframes

User testing

Putting together a content plan

Establishing “look and feel”

Getting input from a focus group

Phase 3: Development

Producing comps

Content development

Media development

Building the presentation layer with HTML and CSS

Developing the backend

Phase 4: Deployment

Quality assurance

Launch day

Phase 5: Maintenance

Part II: User-Friendly Design

Chapter 3: Designing the Right Site for the Right Crowd

Who Is the Audience?

Question checklist for clients

Personas

User scenarios

Building an Outline for Your Site

Balancing business requirements with user needs

Categorizing and prioritizing information

Establishing navigation sets based on priority

Creating a Sitemap

Reading between the lines and boxes

Developing your own set of symbols

Everyone’s singing from the same song sheet

The official page index

Building a Map for a Site Redesign

Deconstructing a website

Finishing the sitemap

Developing a Marketing Plan

Offline marketing

Online marketing

Chapter 4: Organizing and Navigating Web Content

Page-Level Planning

Mapping out content zones

Wireframing

Presenting Content on the Page

Indicating text on a wireframe

Working with a content management system

Maximizing your space

Annotating your wireframes

Getting Around in Style

Global navigation

Section navigation

Leaving a trail of bread crumbs

Combining navigation techniques

Use graphical themes, not metaphors

Chapter 5: User Interface Design for the Web

Interaction Design

Creating user flow diagrams

Going with the flow

Visual Design’s Role in Usability

Giving rollover feedback

Designing buttons that look clickable

Taking clues from everyday life

Grouping and nesting elements

Providing “You are here” feedback

Color-coding is overrated

Differentiating between clickable and non-clickable things

Consistency Is Everything

Maximizing Space

Chapter 6: User Testing: Lab Coats Not Required

Developing Testable Prototypes

Creating clickable wireframes

Testing your visual design

Building an HTML click-through to test for usability

Prepping for the User Test

Preparing to-do lists for users

Developing a testing methodology

Carrying Out the User Test

Finding willing guinea pigs

Conducting the test

“Houston, We Have a Problem . . .”: Evaluating Results

Part III: Designing Web Graphics

Chapter 7: Web Graphic Design 101

Crafting the Visual Interface

Developing page templates

Creating comps

Blending color, type, and graphics

Using a grid system

Establishing Visual Priority

Implementing the “big, medium, small” strategy

Breaking up the page into manageable areas

Designing around the fold line

Adding Breathing Space

Establishing a Design Style Guideline

Graphic style guides

Button styles

Type styles

Chapter 8: Letter-Perfect Type Design

Text That You Can Actually Read

Choosing the right font for the situation

Not too big; not too small

Controlling Text Display

Graphic text versus HTML text

Language localization

Font specifications

Have a font-fallback plan

Working with CSS

External style sheets

Internal style sheets

Chapter 9: Understanding Web Color, Resolution, and File Formats

The Secret World of RGB

Subtractive and additive colors

Gazillions of colors

Color Bit Depth

Limited color palettes

24-bit images

Monitor color depth

Hexadecimal Color Code

Image and Monitor Resolution

Monitor resolution

Image resolution

Bitmap versus Vector Graphics

Bitmaps: A fabric of pixels

Vectors: For the mathematically inclined

The vector-bitmap showdown

Image Compression and File Formats

GIF format

JPEG format

PNG format

SVG format

SWF format

Chapter 10: Building Your Web Comps

The Usual Software Suspects

Photoshop

Fireworks

Illustrator

Flash

Dreamweaver

Mood Boards: Setting the Tone

Design Resources

Stock photography and illustration

Digital photography and scanning images

Typography

Photoshop brushes

Widgets

Web-design templates

Building a Web-Page Template from Scratch

Web Background Graphics

Chapter 11: Getting Inspired: Web-Design Ideas

Developing Design Directions

Working from wireframes

Putting multiple designers on the task

Gathering Design Input

Getting Ideas for Visual and Interaction Design

Cinematic websites

Innovative interaction design

Capturing the brand experience

Designing a Mobile-Friendly Version of Your Site

A new way to look at pixels

Simplify the navigation

Reduce file sizes

Horizontal and vertical orientation

Use a single-column layout

Chapter 12: Presenting Your Design Masterpiece

Assembling an Online Presentation

Presenting your designs online

Constructing working and non-working prototypes

Creating Sizzling Printed Presentations

In living color: Printing your mock-ups

Mounting your work on boards

Presenting to Clients

Clients are suckers for the “ugly duckling”

Here we go again: Round two

Part IV: Producing the Final Website

Chapter 13: Building the Presentation Layer

HTML: The Glue That Holds a Page Together

Sneaking a peek at the source code

Learning (borrowing) from others

HTML editing with power tools

HTML5

A mobile and device-friendly solution

An animation alternative

Touchscreen support

Geolocation

Powerful content handling

DHTML, JavaScript, jQuery, and Ajax

CSS

How CSS works

Color gradients, transparency, and reflections

Shadow effects

Rounded corners

Animation effects

Chapter 14: Platform Selection, Content Management, Analytics, and SEO

Development Platform

Content Management

Custom versus off-the-shelf solutions

Connecting your site to a CMS

Web Analytics

Google Analytics

What can you learn about your site?

Real-time monitoring

Where do people click?

Fee-based services

Search Engine Optimization

On-page and off-page search

URL structure and file names

Remedy duplicate URLs to the same page

Prepare a search-specific Sitemap

More SEO strategies

Natural versus paid search

Inbound and outbound linking

Chapter 15: Websites on Steroids

Extending Website Functionality

Facebook Connect

Twitter

Disqus

Google Maps

A myriad of APIs to choose from

E-commerce Websites

Secure socket layer

Payment gateways

Shopping cart design tips that boost sales

Personalized Web Pages with Cookies

Browser and Location Detection

IP and GPS detection

Responsive design

Global Website Performance

Part V: The Part of Tens

Chapter 16: Ten Tips for Managing Your Web-Design Business

Presenting Your Work

Assembling a portfolio

Presenting your work

Developing a Proposal

Winning the Bid

Knowing What to Charge as an Independent Consultant

How Agencies Charge

Managing a Client’s Expectations

Setting Client Responsibilities for the Project

Getting Clients to Sign Off on Key Milestones

Managing the Web Project’s Workflow

Hiring and Managing Subcontractors

Chapter 17: Ten Information and Interaction Design Tips

Use Only Five to Seven Main Categories

Develop Wireframes for Each Unique Page Layout

Always Label Your Buttons and Icons

Mind the Download Time

Provide “You Are Here” Feedback

Make It Easy to Get Back Home

Visually Differentiate Clickable and Non-clickable Things

“One of These Buttons Is Not Like the Others”

Tread Lightly with Real-Life Metaphors

Use Color-Coding Sparingly

Chapter 18: Ten Things That Can Go Wrong

“Can We Add Just One More Thing?”

“We Don’t Have Time for a Sitemap.”

“The Clients Want THAT Design?”

“Who Needs Usability Testing When You Have Me?”

“But I’m Sure I Can Make This New Technology Work!”

“We’re Planning for an International Audience?”

“The Site Needs to Work on Mobile Platforms?”

“You Mean We Need to Maintain the Site Now?”

“Oops, We Forgot to Add Analytics”

“If We Build It, They Will Come.”

Cheat Sheet

Web Design For Dummies®, 3rd Edition

by Lisa Lopuck

Web Design For Dummies®, 3rd Edition

Published by John Wiley & Sons, Inc.111 River Street Hoboken, NJ 07030-5774 www.wiley.com

Copyright © 2012 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, [phone], fax [phone]. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, [phone], fax [phone], or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, the Wiley logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone].

For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2012935199

ISBN: 978-1-118-00490-6 (pbk); ISBN 978-1-118-22174-7 (ebk); ISBN 978-1-118-23554-6 (ebk); ISBN 978-1-118-26039-5 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

About the Author

Lisa Lopuck is an experienced digital creative executive with over 20 years building, inspiring, and leading creative teams; managing vendors; overseeing digital department and project budgets, brand identity, packaging, and point-of-sale design; and guiding innovation and best practices for web, mobile, social media, and e-commerce projects.

In 1988, Lisa got her first glimpse of multimedia while still at UCLA pursuing her degree in design. She saw a tiny, black-and-white, interactive HyperCard stack designed by The Voyager Company and immediately knew her career path. Her first job out of school was working at the Apple Multimedia Lab in San Francisco. She then moved on to Skywalker Ranch, working with George Lucas to design educational CD-ROMs. The rest has been interactive history — working with everyone from eBay to Disney, and speaking at conferences all over the world.

She most recently served as Vice President of Creative and Digital Media for Monster Energy, where she led the redesign and launch of their global website, e-commerce technology platform, and mobile applications. Under her leadership, Monster’s Facebook brand page exploded from 500 thousand to over 12 million fans in just 1.5 years. Prior to Monster, she also designed several Disney e-commerce websites, including DisneyShopping.com (later folded into DisneyStore.com), and many of the Disney theme-park websites, including HongKongDisneyland.com and DisneyCruiseLine.com.

She currently is the co-founder of Front Row www.frontrow-studios.com, a digital marketing agency exclusively focused on the sports industry. She’s an avid athlete herself (tournament tennis player) and resides in Southern California.

Dedication

For my husband, Matt, who is my chief evangelist, and for our daughter, Jasmine, who is turning out to be quite the talented writer and artist herself.

For my parents who always encouraged me to reach for the stars.

Author’s Acknowledgments

I would like to give a big thanks to the many people who helped make this the best Web Design For Dummies edition yet in the series (funny how they are all men!): A huge thank-you to Aaron and his incredible team at Ekko Media Group, who know how to rise to any occasion and get things done — including providing great technical input for this book. Thank you, Paul, my editor, for keeping me on track. Special props to my crew at Monster Energy: LeRoy, Ryan, Chris, Eric, and Pete who do more amazing work with less than seems humanly possible for such a big ship to run. I know you guys will go far. And lastly, I’d like to acknowledge my current business partners in Front Row, Martin and Don, two of the most talented people I’ve had the pleasure of working with, for their support in the development of this excellent edition.

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments at http://dummies.custhelp.com. For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone].

Some of the people who helped bring this book to market include the following:

Acquisitions, Editorial

Senior Project Editor: Paul Levesque

Executive Editor: Steven Hayes

Senior Copy Editor: Barry Childs-Helton

Technical Editor: Paul Maloney

Editorial Manager: Leah Michael

Editorial Assistant: Amanda Graham

Sr. Editorial Assistant: Cherie Case

Cover Photo: ©iStockphoto.com / Golkin Oleg

Cartoons: Rich Tennant (www.the5thwave.com)

Composition Services

Project Coordinator: Sheree Montgomery

Layout and Graphics: Claudia Bell

Proofreaders: John Greenough, Christine Sabooni

Indexer: Becky Hornyak

Publishing and Editorial for Technology Dummies

Richard Swadley, Vice President and Executive Group Publisher

Andy Cummings, Vice President and Publisher

Mary Bednarek, Executive Acquisitions Director

Mary C. Corder, Editorial Director

Publishing for Consumer Dummies

Kathleen Nebenhaus, Vice President and Executive Publisher

Composition Services

Debbie Stailey, Director of Composition Services

Introduction

Designing professional websites is not just about making beautiful pages: it’s about understanding your audience and crafting an information structure that not only meets their needs but fulfills business goals as well.

It’s about working with a team of people, and understanding the interworkings of the production process from content development through to visual design, comp production, and technical integration.

Over the course of the next 300-or-so pages, I show you what it takes to understand the web-design process from start to finish, with an emphasis on creative design and development. At the end of this book, you’ll have the understanding it takes to tackle a major, commercial website project. You’ll still need lots of practice and experience to turn out the good stuff, but this book gives you the solid foundation that you need to succeed.