The Web Designers Roadmap
Copyright 2012 SitePoint Pty. Ltd.
Product Manager: Simon Mackie
Technical Editor: Diana MacDonald
Indexer: Michele Combs
Editor: Kelly Steele
Cover Designer: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066
Web: www.sitepoint.com
Email: business@sitepoint.com
About Giovanni DiFeterici
Giovanni is an illustrator, designer, and front-end developer at Period Three (http://www.period-three.com/), a web design firm in South Carolina. Hes also the content and style editor for Unmatched Style (http://unmatchedstyle.com/), a design gallery and blog dedicated to documenting and curating all things both
badass and web design-related. Giovanni regularly speaks at conferences about creativity, interface design, and art. Before becoming a designer, he was a fine artist for many years, which continues to inform his web design process and aesthetic. In addition, Giovannis favorite comic book is Akira, he is the proud owner of a large red mohawk, and he believes Francis Bacon is the greatest painter ever.
About SitePoint
SitePoint specializes in publishing practical, rewarding, and approachable content for web professionals. Visit http://www.sitepoint.com/ to access our books, blogs, newsletters, articles, and community forums.
Preface
Welcome to another book about web design! Well, actually, this ones different. This book will also delve into the creative side of designing for the Web, including a look at art history and some sources of inspiration for the intrepid web designer. In the main, well be discussing the phases of the design process and how to incorporate them into your workflow. Some of these stages are tried-and-true, industry-strength sweet magic that the majority of designers use, even if they fail to realize it. Well talk about these stages in great detail because theyre going to be your bread and butter as a web designer. Much of what a web designer does is industry-specific and requires a great deal of technical knowledge (so youll need to know some HTML), but the process is far more important as the vehicle that allows us to complete complex tasks without pulling out our hair. Each step of the design process laid out in this book is something that you can adopt, change, or ignore. I personally believe that designers should work in whatever way best suits their skills. Some prefer to work in the browser with HTML and CSS. Others use Fireworks and create their wireframes and designs in the same project document. Some designers sketch thumbnails, while others dont. I want you to be able to communicate your ideas, so that you can interact effectively with clients and the rest of your team. What I dont want is for you to treat this book as a step-by-step guide for how to be an awesome-sauce designer. You already have the awesome sauce. Im just here to talk about the details. I hope you enjoy the book, that you learn something new, and that you continue to grow as a designer. Many people have helped me reach this point. My only desire is to give something back.
Who Should Read This Book
This book is for web designers who seek a structured way to be creative when designing websites. Its ideal for designers who are just starting out, but is also useful for anyone looking for a different perspective. Furthermore, if youve found yourself in any one of these scenarios, this book is for you:
- Youre stuck on a design.
- Youve been misinterpreting a clients needs.
- You want to learn some new techniques that all the cool kids are into.
- Youve never considered your design process before, but want to get a handle on it.
If you picked up this book, chances are that youre curious about what you could change in your design process, and how to handle such change. So, this ones for you.
Whats in This Book
This book comprises the following seven chapters.
By way of an introduction, Ill explain the books broader concepts and establish the general terminology well be using. The books ongoing project, Spectrumagic, is presented, where Ill set expectations about what youll be learning. Well also look at the relevance of the study of aesthetics, creative processes, and where to find inspiration.Here, Ill present a brief history of design and show how the design process has changed over the years. In particular, Ill focus on the Modernist and Postmodernist eras to provide a context for the chapters that follow, as well as lay the groundwork for common design patterns.This chapter covers some practical lessons when deciding on the look of your design. It will include the discovery process, which involves learning from other disciplines, and resource gathering, which encompasses mood boards, color palettes, and storyboards.Now well learn about assessing the structural and technical needs of a website and its design. Well look at the designs purpose, and how to best communicate interaction and hierarchy. Areas covered are designing for multiple form factors including mobile sites, responsive design, wireframes, strategy, and content grayboxing.Programming design patterns are proven solutions to problems that arise while developing applications. Web design also has its share of issues. In this chapter, well look at the most common design patterns, and possible use cases for when and how they should be implemented.First, well address conceptual design and how we arrive at a theme that informs the design process. Well look at a real-life example and cover topics such as designing the interface, art direction, and creative association. Then, well delve into our Spectrumagic project, implementing what weve learned. Along the way, well introduce the modern marvel that is style tiles and the notion of intuitive design.Understanding the limitations of web-based technologies and how to overcome them is a necessary part of implementing designs. Often, a little knowledge ahead of time can help to shape a design and make front-end development easier. Well also examine progressive enhancement and look at some fancy tools and apps that should make your designing life easier.
